1.Vue前端框架概述
Vue是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。
2.新建Vue项目的步骤
1.下载Vue.js
Vue的官方网址:Vue
Vue官方网址的中文版:Vue中文版
访问Vue.js下载这个网址可选择开发版本和生产版本
2.新建项目文件夹
新建项目文件夹为Demo01,在Demo01下新建如下文件夹和文件:
创建好之后把在Vue官网下载的Vue.js拖到项目的assets文件夹下的js文件夹中。反正文件也不大就全部下载拖进去就完事了。example文件夹下写主要的页面代码。index.html作为项目的入口文件。
index.html页面的示例代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js实例</title>
</head>
<body>
<h1>Vue2.0实例</h1>
<hr>
<ol>
<li><a href="#">Hello World 实例</a></li>
</ol>
</body>
</html>
3.live-server的使用
live-server是用于静态网页的开发和浏览的工具。live-server有最主要的三个功能:修改文件浏览器自动刷新;浏览器自动打开项目(默认打开的就是index.html);本地开发搭建临时的服务。
在VScode中调出终端,输入命令:npm install -g live-server
,接着输入live-server
如果可以在浏览器看到index.html页面说明live-server安装成功。到此为止,准备工作基本完成。
4.初始化项目
在命令行输入npm init
在项目中生成package.json
文件用来配置一些项目的初始化信息及参数。