vue-cli搭建的项目中使用mockjs

1、安装mockjs和axios

2、在vue-cli搭建的项目根目录下新建一个js文件:mocks/index.js

// 引入mockjs
import Mock from 'mockjs';

// 假数据
var menus = [
    {
        'menuId': 1,
        'menuName': '系统管理'
    },
    {
        'menuId': 2,
        'menuName': '用户管理'
    }
];

// mock模拟的接口
Mock.mock('sys/menu/list', 'get', function () {
    return {
        code: 0,
        message: 'success',
        data: menus
    }
});

3、在main.js中引入mock模拟接口

import Vue from 'vue';
import App from './App.vue';
import router from './router/index.js';

Vue.config.productionTip = false

// 引入mock数据
require('../mocks/index.js');

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

4、使用mock模拟接口



控制台输出结果:

vue-cli搭建的项目中使用mockjs_第1张图片

你可能感兴趣的:(Vue)