不知道大家还记不记得mockjs的特性，现在让我带大家一起回顾一下吧！！！特性
前后端分离增加但愿测试的真实性开发无入侵用法简单数据类型丰富方便扩展不知道大家注意到了没，mockjs支持支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。接下来我带大家模拟数据。一、创建项目
这时候运行npm run dev 让它跑起来，浏览器界面就会有Vue的logo，以及一些内容二、Json-Server全局安装 webpack
$ npm/cnpm install webpack -g
在安装 vue-cli
创建一个基于 webpack 模板的新项目
$ vue init webpack webpack-simple (一路回车哦)
安装依赖
npm/cnpm install
项目搭建好了，需要本地模拟数据来测试接口效果。
这里使用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.jsMock 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
好啦，今天就到这里结束啦，明天各位说一下怎么把数据铺到页面上，大家也可以尝试，小小的透露一下，将数据铺到页面上需要运行两条命令，也就是说，要打开两个命令窗口，是不是觉得很麻烦呢？
所以明天我们就想办法将两条命令合并为一条，拭目以待吧！！！
如果大家喜欢这篇文章，记得点喜欢哦！！！
作者：茹茹茹茹茹茹欧尼_
链接：https://www.jianshu.com/p/5b22eb01a468
