vue使用mockjs配置步骤

/**
  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这些模拟的资源，
 从而组件中不用做任何修改，最大减少反复工作量
 * */

 

 

转载自 https://blog.csdn.net/museions/article/details/79289320