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这些模拟的资源，
从而组件中不用做任何修改，最大减少反复工作量
vue使用mockjs配置步骤(无需启动node服务)
原文地址：https://www.cnblogs.com/mmykdbc/p/10605517.html