vue3.0 mock.js简单使用方法

前提：本项目已提前安装vue cli脚手架、并安装了router、axios具体安装方法百度，篇文章主要介绍vue利用mock.js模拟后台数据。

# 安装
npm install mockjs

main.js引入mock

require('./mock');

项目src新建mock目录，并新建index.js。

mock/index.js

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

另外，新建一个user.js模拟用户数据。

mock/user.js

const Mock = require('mockjs');
let userList = Mock.mock({
  // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  'list|10': [{
    id: '@id', //随机id
    name: '@cname', //随机名称
    nickName: '@last', //随机昵称
    phone: /^1[34578]\d{9}$/, //随机电话号码
    'age|11-99': 1, //年龄
    address: '@county(true)', //随机地址
    email: '@email', //随机邮箱
    isMale: '@boolean', //随机性别
    createTime: '@datetime', //创建时间
  }]
})
export default {
  'get|/getUsers': option => {
    return {
      status: 200,
      message: 'success',
      data: userList
    };
  }
}

组件获取请求方法，首先新建一个AxiosGet.vue。

设置好路由，启动服务器访问页面，渲染效果如下：