不知道大家还记不记得mockjs的特性，现在让我带大家一起回顾一下吧!!!
特性
前后端分离
增加但愿测试的真实性
开发无入侵
用法简单
数据类型丰富
方便扩展
不知道大家注意到了没，mockjs支持支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。接下来我带大家模拟数据。
一、创建项目
全局安装 webpack
$ npm/cnpm install webpack -g
在安装 vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack webpack-simple (一路回车哦)
安装依赖
npm/cnpm install
这时候运行npm run dev 让它跑起来，浏览器界面就会有Vue的logo，以及一些内容
二、Json-Server
项目搭建好了，需要本地模拟数据来测试接口效果。
这里使用Json-Server这个工具来构建本地Server
安装 json-server
npm/cnpm install -g json-server
安装完成后，在项目中创建json文件模拟返回的数据内容，这里我的json文件名为db.json
目录结构
m.png
{user:{name:Rose,age:22,sex:boy
}
}
然后执行 json-server db.json
注意：
mock.png
执行成功后会提示已经启动了一个端口为3000的服务，在浏览器中输入localhost:3000/user 能看到如下的页面：
json.png
到这里，本地的server已经搭建完毕，但是，本地的server数据是死的，这时候就用到了mock。
三、使用Mock.js
Mock Server中 db.json 中的数据是是死的，我们可以借助Mock.js生成动态数据，增加测试的真实性。
安装mock.js
npm install mockjs --save-dev
项目中创建db.js 文件，和db.json是同级目录哦，内容如下：
a.png
执行 json-server db.js 再次查看 localhost:3000/user 已经能看到数据效果了
u.png
好啦，今天就到这里结束啦，明天各位说一下怎么把数据铺到页面上，大家也可以尝试，小小的透露一下，将数据铺到页面上需要运行两条命令，也就是说，要打开两个命令窗口，是不是觉得很麻烦呢?
所以明天我们就想办法将两条命令合并为一条，拭目以待吧!!!
如果大家喜欢这篇文章，记得点喜欢哦!!!