Vue 简介
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不 同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上 手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
MVVM思想
M：即 Model，模型，包括数据和一些基本操作
V：即 View，视图，页面渲染结果
VM：即 View-Model，模型与视图间的双向操作（无需开发人员干涉）
在 MVVM 之前，开发人员从后端获取需要的数据模型，然后要通过 DOM 操作 Model 渲染 到 View 中。而后当用户操作视图，我们还需要通过 DOM 获取 View 中的数据，然后同步到 Model 中。
而 MVVM 中的 VM 要做的事情就是把 DOM 操作完全封装起来，开发人员不用再关心 Model 和 View 之间是如何互相影响的：
只要我们 Model 发生了改变，View 上自然就会表现出来。
当用户修改了 View，Model 中的数据也会跟着改变。
把开发人员从繁琐的 DOM 操作中解放出来，把关注点放在如何操作 Model 上。
一、安装Node.js
见上一篇博客：Node.js 安装配置
二、全局安装 webpack
npm install webpack -g
三、全局安装 vue 脚手架
npm install -g @vue/cli-init
四、初始化 vue 项目
vue init webpack appname #vue 脚手架使用 webpack 模板初始化一个 appname 项目
如果提示 vue 命令不可用，则将第三步命令换为以下命令再次执行即可：
npm install -g @vue/cli
五、启动 vue 项目
项目的 package.json 中有 scripts，代表我们能运行的命令
npm start = npm run dev #启动项目
npm run build #将项目打包
六、项目结构
运行流程
进入页面首先加载 index.html 和 main.js 文件。
main.js 导入了一些模块【vue、app、router】，并且创建 vue 实例，关联 index.html 页面的<div id=”app”>元素。使用了 router，导入了 App 组件。并且使用<App/>标签 引用了这个组件
第一次默认显示 App 组件。App 组件有个图片和<router-view>，所以显示了图片。 但是由于<router-view>代表路由的视图，默认是访问/#/路径（router 路径默认使用 HASH 模式）。在 router 中配置的/是显示 HelloWorld 组件。
所以第一次访问，显示图片和 HelloWorld 组件。
我们尝试自己写一个组件，并且加入路由。点击跳转。需要使用<router-link to="/foo">Go to Foo</router-link>标签
七、导入 element-ui 快速开发
1、安装 element-ui：
npm i element-ui
2、在 main.js 中引入 element-ui 就可以全局使用了。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
3、将 App.vue 改为 element-ui 中的后台布局：使用element-ui的相关标签编写 <template> </template> 的布局。
4、添加测试路由、组件，测试跳转逻辑
(1) 、参照文档 el-menu 添加 router 属性
(2) 、参照文档 el-menu-item 指定 index 需要跳转的地址