vue.js是什么？
可以让web开发变得简单，提供了现代web开发常见的高级功能，比如：
- 解耦视图与数据
- 可复用的组件
- 前端路由
- 状态管理
- 虚拟DOM
- MVVM模式
与知名前端框架Angular、Ember等一样，Vue.js在设计上也使用了MVVM（Model-View-ViewModel）模式：
当View（视图层）变化时，会自动更新到ViewModel（视图模型），反之，View（视图层）和ViewModel之间通过双向数据绑定（data-binding）建立联系。
简单理解为：ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。
点击深入理解链接
使用vue-cli脚手架搭建
搭建步骤
1.键盘window+R键打开cmd窗口；
2.输入node -v（查看版本意思）：查看是否装有node.js，没有去官网下载（点击下载地址~）
3.输入npm -v：查看npm的版本；
4.输入npm install -g（全局的意思） webpack（前端自动化构建打包工具）：全局安装webpack；
5.输入npm install -g vue-cli（vue的脚手架）：全局安装vue-cli；
6.输入vue -v ：查看是否安装vue；
7.输入npm install -g vue：全局安装vue；
8.输入d:进入d盘；
9.输入cd（进入目录）Vue（文件夹名称）;
10.输入vue init（初始化）webpack vue-template（文件夹名称）：初始化构建使用webpack的vue项目模板；
11.输入项目名称（project name）：vue-template（最好与上文件夹名称相同）还有以下步骤的选项：
- Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vue-template
- Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
- Author：作者，如果你有配置git的作者，他会读取。
- Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
- Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
- setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
- Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。
如图
12.ctrl+C：结束终止
13.输入cd：（文件目录）
14.输入 npm run bulid （运行）
15.通常会有验证的eslint，汇报一些无关紧要的错误，只要把如下图文件的对应行代码注释，ctrl+c停止项目再npm run dev运行即可：
16.webpack打包发布，更改config/index.js根目录文件如下图： （保存再npm run dev运行即可）
安装element ui
安装步骤
1.输入npm i element-ui -S (安装element UI）
2.进入main.js文件 引入element-UI文件（如下图）
3.保存文件即可。
vue-router（路由）
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
安装路由
1.在用vue-cli构建项目的时候我们已经使用vue-router（详见如下图一），所以main.js已经引入router（vue-router）（详见如图二）。
图一：
图二：
2.如果在vue-cli构建项目的时没使用vue-route选择‘N’，则可输入npm install vue-router --save-dev，安装路由。
3.解读router/index.js文件
import Vue from 'vue' //引入vue
import Router from 'vue-router' //引入vue-router
import HelloWorld from '@/components/HelloWorld' ////引入根目录下的Hello.vue组件
Vue.use(Router) //Vue全局使用Router
export default new Router({
routes: [ //配置路由，这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
component: HelloWorld, //对应的组件模板
name:'HelloWorld', //路由名称
}
]
)}
搭建项目单页面
vuex
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
安装vuex
1.在控制命令中输入：npm install --save vuex （安装在当前项目下 vuex）
2.在main.js文件中引入vuex
案例解说
在main.js文件中：
（1）声明vuex存储变量
//声明vuex存储的变量
const store=new Vuex.Store({
//vuex的配置
state:{
count:1
}
})
未完待续~