mock，大概操作就是根据后端提供的接口文档（没提供的打死他），在前端代码写上约定的接口名、入参、出参，在mock中写入约定的假数据，模拟整个联调过程，如果在页面中正常显示，那么后期出什么问题都不是前端调用api所致；
接下来我们就来看vue中如何使用mock；
安装mock.js
在项目根目录cmd
输入命令 npm install mockjs --save-dev
文件配置
在文件夹src中，手动创建文件夹mock，在里面创建文件mock.js，写入内容：
// 引入mockjs
const Mock = require('mockjs');
接下来是假数据结构：
// 假数据：假设这个返出假数据名为“jiaDataList ”
const jiaDataList = function () {
let list = [ // 模拟数据放这里 ]
return lsit
}
然后是对应的接口（定义接口的url地址，请求方式，返回的数据）：
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/jiaData/jiaLsit', 'GET', jiaDataList );
main.js
在已有的文件main.js里，一堆import下面，引入mock.js
// 引入mockjs（根据自己的路径修改）
require('./mock/mock.js')
axios拦截
在文件夹src里，手动创建文件夹http，里面手动创建文件api.js，写入内容：
// 创建http文件夹，在该文件夹下创建api.js用来对axios做了拦截设置处理。
import axios from 'axios'
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded'
// 请求拦截器
axios.interceptors.request.use(config => {
const token = localStorage.getItem('userToken');
if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
config.headers.accessToken = token;
}
return config;
},
error => {
return Promise.reject(error);
})
// 响应拦截器
axios.interceptors.response.use(response => {
return response;
},
error => {
return Promise.reject(error);
})
export default axios
搭建mock服务器
vue项目在cmd中“npm run dev”之后，在同一层同时（可能要以管理员身份）新开一个cmd
全局安装mock服务器：
npm i @shymean/mock-server -g
然后输入下面命令（路径可能要改动）启动mock服务器。
mock -p 9999 -f ./src/mock/mock.js
预览数据显示情况
vue项目npm run dev的时候 除了localhost：8080之外，还会给个预览地址比如：http://192.111.2.222。
咱们想要预览模拟假数据在浏览器中的预览地址则是把后面的端口“8080”改成“9999”，在最后斜杠后面加上接口名字，即可预览到有没有成功拼上mock.js中的假数据，比如
localhost:8080/jiaData/jiaList
或者
http://192.111.2.222/jiaData/jiaList
