1. npm 安装Mock.js

npm install mockjs

2. Main.js中引入Mock

import Mock from 'mockjs'
require('./mock')
createApp(App).use(Mock).mount('#app')

?3. 在src目录下新建一个 mock目录并创建index.js文件，用来配置mock

// 配置 mock 文件
// 首先引入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);
    }
});

4. 在mock目录下在创建一个js文件，我取名为article.js，用来配置自己在项目所需要的模拟数据

let articleList = {
    code: 200,
    msg: 'success',
    data: { //数据
        total: 100, //模拟数据的页数，分页功能。 100条
        'rows|8': [{ //模拟每页有多少条数据。 每页8条。
            id: '@guid', //每页数据都是有id的。 随机生成数据. @是占位符,随机生成后不会重复。
            title: '@ctitle',  //前缀加 c 的意思为随机生成中文，否则是英文
            author: "@cname",  
            'job | 1': ['Web前端','Java工程师','架构工程师','数据库管理员'] // | 意思为在数组里随机抽取一个
        }]
    }
};
export default {
    'get|/article/list': articleList
}

5. 如果需要少量数据数据时，可以换种写法，比如

let articleList = [{
    id: 1,
    title: 'df',
    author: 'df',
    job: 'Web前端'
},{
    id: 2,
    title: 'fd',
    author: 'fd',
    job: 'Java工程师'
}]

export default {
    'get|/article/List':  option => {
        return {
            code: 200,
            msg: 'success',
            data: articleList
        };
    }

6.?也可以使用template返回

let articleList = {
    code: 200,
    msg: 'success',
    data: [{
        id: 1,
        title: 'zs',
        author: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]
};
let demoList2 = [{
    id: 1,
    name: 'zs',
    age: '23',
    job: '前端工程师'
},{
    id: 2,
    name: 'ww',
    age: '24',
    job: '后端工程师'
}];
export default {
    'get|/article/List': articleList,
    // 也可以这样写
    // 官方解释为：记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时，函数 function(options) 将被执行，并把执行结果作为响应数据返回。
    'get|/article/List': (option) => {
        // 可以在这个地方对demoList2进行一系列操作，例如增删改
        // option 指向本次请求的 Ajax 选项集，含有 url、type 和 body 三个属性
        return {
            code: 200,
            msg: 'success',
            data: articleList
        };
    }
}