五步教你使用vue 中的mock.js 模拟数据

1.首先安装mock

npm install mockjs --save-dev

2.在项目里面建一个mock.js的文件

3.根据你建的文件的路径，在main.js里面引入 require('./mock.js'); 我是建到main旁边了。

 4.百度一下mock语法，把你想模拟的数据写到mock.js里面代码如下

import Mock from 'mockjs' // 引入mockjs
 
let data = 
    {
        'data|10': [ {
            'id|+1':0,
            'content|+1':[
                '李佳琪今天又在卖口红',
                '薇娅又再卖好货啦',
                '儿童节送女朋友什么',
                '完美日记小动物',
                '十款眼镜夏季大卖'
            ],
            'size|10-35': 0, //100以内随机整数
            'hot|1-3': true //日期
        }]
    }
 
Mock.mock('data/index', 'get', data) // 根据数据模板生成模拟数据

5.在你需要调用的页面引入mock然后调用mock就可以了，代码如下：

import Mock from "mockjs";//引入mock  
this.axios({
                    method: "get",
                    url:"data/index",
                })
                .then((res)=> {
                    this.lists = res.data.data;
                })
                .catch((error)=> {
                    console.log(error);
                })