一、搭建项目架构：
项目采用Webpack+Vue-router的架构方式，开始安装（基于windows系统）
1.按Win+R，然后在文本框中输入cmd，回车打开命令行，输入vue-cli安装命令：
npm install vue-cli -g
这里的-g代表全局安装。
2.在命令行中初始化项目，我们采用的是webpack模板，输入初始化命令：
vue init webpack MobileEcommerce
这里的MobileEcommerce是我的项目文件夹名称，你可以起一个自己喜欢的名称。安装时根据项目需要配置所需要的模块。这里有一个小技巧，就是在你已经提前建立好了文件夹的时候，我们也进入了文件夹，这时候我们可以省略这个文件夹名称。如下情况：
mikdir MobileEcommerce
cd MobileEcommerce
vue init webpack
3.测试环境是否安装成功
使用如下指令 进行测试环境的打开：
npm run dev
在浏览器中输入 http://localhost:8080 进行测试。
在浏览器中打开页面，出现Vue的正常页面时，说明你的项目已经初始化成功了。下节课我们就可以愉快的进行编程了。
二、Vant的引入
1.安装Vant
安装指令（简写形式）
npm i vant -S
完整写法为：
npm install vant --save
2.优雅的引入Vant
vant是支持babel-plugin-import引入的，它可以让我们按需引入组件模块，并且不用管理我们的样式，现在Vue项目组件库的主流引入方法。 安装babel-plugin-import
npm i babel-plugin-import -D
完整写法为：
npm install babel-plugin-import --save-dev
3.在.babelrc中配置plugins（插件）
"plugins": [ "transform-vue-jsx", "transform-runtime", ["import",{"libraryName":"vant","style":true}] ]
4.按需使用Vant组件
我们设置好.babelrc后，就可以按需引入Vant框架了。比如现在我们引入一个Button组件. 在src/main.js里加入下面的代码：
import { Button } from 'vant'
Vue.use(Button)
有了这段代码之后，我们就可以在需要的组件页面中加入Button了.
<van-button type="primary">主要按钮</van-button>
三、自己mokr数据