vue如何模拟后台数据请求本地数据配置

npm install mockjs -D

import Mock from 'mockjs'

//这是模拟数据示例
Mock.mock('/api/getList', 'get', {
    code: 0,
    message: 'ok',
    data: {
        list: [
            { id: 1, name: '兰博基尼', price: '1亿', color: 'red' },
            { id: 2, name: '法拉利', price: '2亿', color: 'blue' },
            { id: 3, name: '奥迪', price: '3亿', color: 'black' },
            { id: 4, name: '宝马', price: '4亿', color: 'white' }
        ]
    }
})

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './mock/mock.js'

Vue.config.productionTip = false

//将mock绑定到Vue实例的原型上
Vue.prototype.$Mock = Mock

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

//示例中的调用请求
methods: {
    getData() {
        this.$Mock.mock('/api/getList', 'get', {});
        this.$Http.get('/api/getList').then(res => {
            //响应成功操作
            console.log(res);
        }, error => {
            //响应失败操作
            console.log(error);
         })
     }
}