使用vue模拟后端数据mock

1、vue直接使用mock
step1 : 安装 mockjs

npm install mockjs

step2：直接引入mock.js，并编写mock接口（Mock.mock）

//【mock.js】
//引入mock模块
import Mock from 'mockjs';

Mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});

step3：在需要的地方引入编写后的接口js即可。

【App.vue】

这是目录

image.png

完整代码

//【main.js】
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

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


【mock.js】
//引入mock模块
import Mock from 'mockjs';

Mock.mock('/login', { //输出数据
    'name': '@name', //随机生成姓名
    //还可以自定义其他数据
});
Mock.mock('/list', { //输出数据
    'name': '@name', //随机生成姓名
    'age|10-20': 10
    //还可以自定义其他数据
});



【App.vue】

image.png