/** 1.安装好mockjs * 命令行 npm install mockjs * 2.在项目中引用mockjs [ 重要 ] * ##在项目src目录下新建一个mock文件夹 * ##在mock文件夹下新建 index.js ---存放所有的http模拟返回的接口数据 * 3.编辑index.js * 添加代码导入mockjs:import Mock from 'mockjs'; * 添加接口数据代码: *************************index.js****************************** import Mock from 'mockjs'; const vehicle = Mock.mock( '/api/vehicle','post', (req, res) =>{ return { code:200, data:[{ id:1, licNumber:'陕A79898', color:1, buyTime:'2017-04-01' },{ id:1, licNumber:'陕A79898', color:1, buyTime:'2017-04-01' }], message:'查询成功' } } ) const user = Mock.mock( '/api/user','get', (req, res) =>{ return { code:200, data:{ id:1, sex:1, age:25, createTime:'2017-04-01' }, message:'查询成功' } } ) export default { vehicle,user } ***************************end*********************************** 4.为了方便在所有组件中使用mock模拟数据 在i项目 main.js中导入刚编辑的接口数据 import mockdata from "./mock"; //这样的话组件里就可以随意调用接口了 5.在组件中调用虚拟接口 在生命周期钩子函数中调用接口即可:可以使用axios 或者 vue-resourse created(){ this.$http.get('/api/vehicle',null,r=>{ console.log( r ) },r=>{}) //此http请求请自行封装 this.$http.post('/api/user',null,r=>{ console.log( r ) },r=>{}) //此http请求请自行封装 } 6.注在项目接口调试完成后需要删除main.js中对于mock的引用以及mock/index.js这些模拟的资源, 从而组件中不用做任何修改,最大减少反复工作量 * */