学习笔记
1.当另一方接口或服务还未完成，阻碍项目进度时，可以通过mock的方式，实现并行开发。
2.另一方接口不稳定，而这边需要一个稳定的结果才能继续往下走流程时，也可以使用mock。有时候自动化测试需要一个持续稳定的环境，也可以对不是很重要的服务进行mock处理。
使用 vue-cil 项目和 mock.js 结合使用案例
1.使用vue-cil 创建一个vue项目
vue create moc_dome
2.安装依赖
1.axios ,发送请求
npm i axios -S
2.mock ,创建数据数据
npm i mockjs -S
3.json5 , 解决json文件 无法添加注释问题
npm i json5 -S
3.创建mock随机数据文件，修改webpack的配置，发送axios请求
1.在项目根目录创建一个mock文件夹，在文件夹里面创建一个index.js，js写入如下内容
const fs = require('fs');
const path = require('path');
const Mock = require('mockjs');//mockjs 导入依赖模块
const JSON5 = require('json5');
//读取json文件
function getJsonFile (filePath) {
//读取指定json文件
var json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8');
//解析并返回
return JSON5.parse(json);
}
//返回一个函数
module.exports = function (app) {
//监听http请求
app.get('/user/userinfo', function (rep, res) {
//每次响应请求时读取mock data的json文件
//getJsonFile方法定义了如何读取json文件并解析成数据对象
var json = getJsonFile('./userInfo.json5');
//将json传入 Mock.mock 方法中，生成的数据返回给浏览器
res.json(Mock.mock(json));
});
}
2.在项目根目录，找到vue.config.js写入如下内容 （如果项目根目录没有vue.config.js文件就自己创建一个）
vue-cil 3.0 把根目录的配置文件，都隐藏起来了， 在官方提供使用vue.config.js来修改 webpack的配置 具体参考官方文档
module.exports = {
devServer: {
before: require('./mock/index.js')//引入mock/index.js
}
}
3.在项目文件中发送axios请求，（建议先测试，在src/.vue组件发送请求）
1.在发送请求文件里面先 引入axios 发送请求
axios.get("/user/userinfo")
.then(res => {
console.log(res);
})
.catch(err => {
console.error(err);
});
