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

原文链接：https://blog.csdn.net/sleepwalker_1992/article/details/105075637?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158796400819725256731213%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=158796400819725256731213&biz_id=0&utm_source=distribute.pc_search_result.none-task-blog-2_allfirst_rank_v2~rank_v25-2

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模拟接口

  
  
<template>
<div>
vue-cli搭建的项目中使用mock数据
</div>
</template>

<script>
import axios from 'axios';

export default {
name: 'mock',
mounted () {
this.getData();
},
methods: {
getData () {
axios.get( 'sys/menu/list').then( res => {
console.log(res)
}).catch( error => {
console.log(error)
})
}
}
}
</script>
  
  

控制台输出结果：