mockjs是一个生成随机数据，拦截ajax请求的一个前端库，适合于用在本地测试的时候生成随机数据，来模拟前端请求后端接口的交互：
    官网地址： mockjs 文档地址： mockjs

    1. 安装

      1. npm install mockjs

    2. 创建src下建立mock目录，并创建mock.js

    3. 项目中引入并使用

    在main.js中判断条件，并引入mock.js

    1. // 如果当前访问的启动env是mock, 则引入mock, 调用mock数据
    2. if (process.env.NODE_ENV === 'mock') {
    3.   require('./mock/mock.js')
    4. }

    1. 那么我们如何创建为mock的启动env呢？打开package.json

      1. {
      2.  "scripts": {
      3.  "serve": "vue-cli-service serve",
      4.  "build": "vue-cli-service build",
      5.  "lint": "vue-cli-service lint",
      6.  "mock": "vue-cli-service serve --mode mock" // 这样就可以使用mock命令启动项目
      7. },
      8. }

    2. 使用mock命令启动项目

      1. npm run mock

    3. 配置mock.js， 进入 mock/mock.js

      1. import Mock from 'mockjs'
      2. import data from './data.js'
      3. // 设置拦截请求以及返回数据
      4. // 第一个参数，请求的url，可以正则匹配
      5. // 第二个参数，请求方式
      6. // 第三个，处理的返回function，res可以打印看到是接收到的url请求的一些相关数据
      7. Mock.mock(/\/workinfo\/getlist/, 'get', (res) => {
      8.  return {data: data, retmsg: 'ok', retcode: 0}
      9. })

    4. 进入data.js配置一些mock数据，code如下：

    1. import Mock from 'mockjs'
    2. // 定义变量接受Mock的Random类
    3. let Random = Mock.Random
    4. // Random类继承
    5. Random.extend({
    6.   // 数组中的随机一个
    7.   randomArr: function (data) {
    8.     let randomPrincipal = data
    9.     return this.pick(randomPrincipal)
    10.   },
    11.   // 转换随机日期为时间戳
    12.   transDateToTimestamp: function (data) {
    13.     let time = (new Date(data)).getTime() / 1000
    14.     return this.pick(time)
    15.   }
    16. })
    18. let datalist = Mock.mock({
    19.   // 代表list键含有1-100条以内的随机数量的数据
    20.     'list|1-100': [{
    21.       'kid|+1':1, // id是从1开始自增
    22.     'id': '@id', // 随机的一个id
    23.     'user': '@randomArr(["xiaoming", "xiaowang", "xiaogang"])', // 获取数组随机的一个值
    24.     'status': '@boolean', // 随机的一个布尔值
    25.     'title': '@title', // 随机的标题
    26.     'desc': '@sentence', // 随机的英文句子
    27.     'content': '@csentence', // 随机的中文句子
    28.     'createtime': '@datetime', // 随机的日期
    29.     'updatetime': '@transDateToTimestamp(@datetime)' // 使用自定义的函数将日期转换成时间戳
    30.   }]
    31. })
    33. let data = datalist.list
    35. export default data
    1. 这个时候，如果我们前端发起请求，我们将看到我们返回的数据

    image.png
    至此，就完成了前端vue-cli使用mockjs的配置了。剩下的就是按照对应的不同请求去配置相关的mock数据了。