五步教你使用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);
                })