本文的主要内容如下：
- 安装插件
- 组件的结构
- 组件的应用
- 路由的应用
- 用mock.js模拟数据
- 编译
如果还没有搭建Vue的项目环境，请参考vue-cli构建vue项目
关于Vue是什么，以及它的基本语法，请参考Vue.js的官方文档介绍。
图解MVVM（Model-View-ViewModel）模式的Vue：
现在开始Vue实践之旅啦
1.首先，先来安装几个插件（后面会说用来干嘛的）
npm install vue-router –save
npm install vue-resource –save
npm install mockjs –save
( –save 可以让该插件显示在 package.json 的dependencies中)
2.打开工程目录下的App.vue
template 写 html，script写 js，style写样式
3.组件的应用
组件系统是Vue的重要概念，我们可以用小的组件来构建大型的应用，任意个应用界面我们都可以抽象成一个组件树。
在 Vue 里，一个组件实质上是一个拥有预定义选项的一个 Vue 实例。
创建个组件：在工程/src/component文件夹下，创建个First.vue文件，并仿照App.vue的格式 写第一个组件
然后在 App.vue 使用组件 ( 因为在 index.html 里面定义了<div id="app"></div>所以就以这个组件作为主入口，方便 )
第一步，引入。
在<script></script>标签内写：
第二步，注册。
在<script></script>标签内的 components 加上 引入的组件 First 记得中间加英文逗号!!!
第三步，使用。
在<template></template>内加上 <first></first>
这时你会看到浏览器的页面效果显示如下：
4.路由的应用
前面已经装好了vue-router，
使用 vue-router 搭建单页应用，主要有五步：
- 创建组件
- 创建路由
- 创建和挂载实例
- 渲染匹配的组件
<router-link>组件跳转到指定路径- 页面呈现，噢啦
第一步，创建组件
在 src 下新建文件夹 views ，在该文件夹下新建两个文件 PageOne.vue ,PageTwo.vue
为了方便 PageOne.vue 我们直接复制 为了方便 App.vue 的代码，PageTwo.vue 复制 First.vue 的代码
第二步，创建路由
在 src 下新建文件夹 js ，在该文件夹下新建 vue-router.js 文件
在这里创建路由（粘贴的代码图中都有注释，我就不一一解释了哈！！！！）
第三步，创建和挂载实例
修改 main.js
第四步，在页面上使用<router-view></router-view>标签，渲染匹配的组件。
修改 App.vue
第五步：使用<router-link>组件跳转到指定路径
注意！！！在Vue 2中，v-link指令已经被一个新的<router-link> 组件指令替代
最后你会看到下面的效果，点击 下面的 who are you ？ 跳转到 http://localhost:8080/PageTwo：
5.用mock.js模拟数据
新建Mock.js文件
在 src/js 新建 Mock.js 文件
内容如下：
Mock.mock 是 Mock的方法，第一个参数自定义的url（也就是接口），后面的参数可自定义配置。
具体配置参数编写，可参考Mock.js.
引入Mock.s 和 vue-resource
在 main.js 引入
输出数据
我们在 First.vue 上来动态加载数据
duang，duang，duang!!!!现在可以看到页面上有数据啦：
6.编译
npm run build
