超级简单的Vue使用模拟数据开发，再也不需要等后端Api接口

安装 mock.js

npm install -D mockjs

新建 mock 相关文件夹，新建入口 index.js

import Mock from 'mockjs'

// 设置响应延时
Mock.setup({
  timeout: '100-1000'//可以是整数，也可以是‘-’字符串
})

Mock.mock('/mock/getList/123', 'get', {
  'msg': '操作成功',
  'code': 200,
  'data': [
    {
      'id': 1,
      'nickName': '@cname', 
      'creatTime': Random.date('yyyy-MM-dd hh:mm:ss')
    }
  ]
})

正则匹配接口

Mock.mock(/\/mock\/serviceRecord\/list\/([a-z]*)/, 'get', {
  'msg': '操作成功',
  'code': 200,
  'dataList|15-30': [
    {
      'id|+1': 1,
      'nickName': '@cname', 
      'creatTime': Random.date('yyyy-MM-dd hh:mm:ss'),
      'serviceType|1-5': 1
    }
  ]
})

main.js 引入 mock 仅在 devloment 环境下使用

process.env.NODE_ENV === 'development' ? import './mock' : ''

其他

• 随机手机号

// 获取 mock.Random 对象
const Random = Mock.Random
// 重仔 Random 方法
Random.extend({
  phone: function () {
    const phonePrefixs = ['132', '133', '134', '135', '136', '137', '138', '180', '187', '189']
    return this.pick(phonePrefixs) + Mock.mock(/\d{8}/)
  }
})

Mock.mock('/mock/api', 'post', {
  code: 200,
  data: {
    "rows|10": [
      {
        "phone": function () {
          return Random.phone()
        }
      }
    ]
  }
})