不知道大家还记不记得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

好啦，今天就到这里结束啦，明天各位说一下怎么把数据铺到页面上，大家也可以尝试，小小的透露一下，将数据铺到页面上需要运行两条命令，也就是说，要打开两个命令窗口，是不是觉得很麻烦呢？

所以明天我们就想办法将两条命令合并为一条，拭目以待吧！！！

如果大家喜欢这篇文章，记得点喜欢哦！！！

作者：茹茹茹茹茹茹欧尼_
链接：https://www.jianshu.com/p/5b22eb01a468