安装相关包

npm install mockjs --save
npm install axios --save

main.js中引入模块

require('./utils/mock');

/* 挂载到原型属性上 */
Vue.prototype.$api = api;
Vue.prototype.$common = common;
Vue.prototype.$axios = axios;

mock.js

import Mock from 'mockjs' // 引入mockjs
import api from '../utils/api';
const Random = Mock.Random; // Mock.Random 是一个工具类，用于生成各种随机数据

let userListData = {
 code: 0,
 msg: '数据查询成功',
 data: {
   result: [],
   totalCount: 20,
   totalPage: 2
}
}
for (let i = 0; i < 10; i++) { // 可自定义生成的个数
 let template = {
   'id': i + 1,
   'username': Random.cname(), // 生成姓名
   'weChat': Random.name(),
   'gender': Random.natural(0, 1),
   'telephone': '13569878965'
}
 userListData.data.result.push(template);
}

console.log(api);
/* 堆代码 duidaima.com  */
/* 获取URL */
/* 拦截用户信息请求 */
let getuserListUrl = api.url.prototype.getuserListUrl() + ".*";
/* 拦截带请求参数和不带请求参数的 请求 */
Mock.mock(RegExp(getuserListUrl), 'get', userListData);

/*
let template = {
  'Boolean': Random.boolean, // 可以生成基本数据类型
  'Natural': Random.natural(1, 10), // 生成1到100之间自然数
  'Integer': Random.integer(1, 100), // 生成1到100之间的整数
  'Float': Random.float(0, 100, 0, 5), // 生成0到100之间的浮点数,小数点后尾数为0到5位
  'Character': Random.character(), // 生成随机字符串,可加参数定义规则
  'String': Random.string(2, 10), // 生成2到10个字符之间的字符串
  'Range': Random.range(0, 10, 2), // 生成一个随机数组
  'Date': Random.date(), // 生成一个随机日期,可加参数定义日期格式
  'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示将从size数据中任选一个数据
  'Color': Random.color(), // 生成一个颜色随机值
  'Paragraph': Random.paragraph(2, 5), //生成2至5个句子的文本
  'username': Random.cname(), // 生成姓名
  'Url': Random.url(), // 生成web地址
  'Address': Random.province() // 生成地址
}
*/

common.js

import axios from 'axios';

/**
* GET公共请求
* @param {*} url 请求地址
* @param {*} params 请求参数
*/
function getAxios(url, params) {
 return new Promise((resolve, reject) => {
   axios({
       method: 'GET',
       url: url,
       params: params
    })
    .then(res => {
       resolve(res.data, resolve);
    })
    .catch(error => {
       reject(error.data, reject);
    });
});
}
// 暴露接口
export default {
 getAxios: getAxios
};
//post，put,delete自己去封装

api.js

import requestAll from './common';
const apiDomainName = 'http://localhost:8086';
/* 用户列表地址 */
const userListUrl = apiDomainName + '/userList';
/* mock数据测试使用 */
class url {
 getuserListUrl() {
   return userListUrl
}
}
class api {
 /* 获取用户列表信息 */
 getuserListInfo(params) {
   return requestAll.getAxios(userListUrl, params);
}
}
// 暴露接口
export default {
 api,
 url
};

UserListInfo.vue

data() {
   return {
       Request: this.$api.api.prototype,
       Common: this.$common.common.prototype /* 用于获取公共方法 */,
       searchCondition:{
            username:''
        }
  }
}
created() {
   this.getuserListInfo();
}
methods:{
   getuserListInfo() {
       this.$nextTick(() => {
           this.Request.getuserListInfo(this.searchCondition)
              .then((res) => {
               if (res.code === 0) {
                   console.log(res.data.result);
              } else {
                   this.$message.error(res.msg);
              }
          })
              .catch((res) => {
               this.$message.error('服务器繁忙，请稍后再试');
          });
      });
  },
}

结果:生成了10条数据

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
   gender: 0
   id: 1
   telephone: "13569878965"
   username: "宋娜"
   weChat: "Michelle Lee"
1: {…}
2: {…}
3: {…}
4: {…}
5: {…}
6: {…}
7: {…}
8: {…}
9: {…}
length: 10
__ob__: Observer {value: Array(10), dep: Dep, vmCount: 0}
__proto__: Array

注意点：Mock.mock（）拦截请求的时候，需要注意请求是否有请求参数，不然第一次使用就会遇到请求地址相同，请求却拦截不到的问题，此时可以使用正则表达式进行解决：

Mock.mock(RegExp(api.apiDomainName + '/userList' + ".*"), 'get', userListData);

语法

Mock.mock( rurl?, rtype?, template|function( options ) )

rurl:表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如
rtype:表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。
template:表示数据模板，可以是对象或字符串。例如 { 'data|1-10':[{}] }、'@EMAIL'。
所以用  .*进行判断，不管有无参数都可以匹配到