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

最新推荐文章于 2026-07-11 15:06:04 发布

原创最新推荐文章于 2026-07-11 15:06:04 发布 · 489 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

当前文章被收录于：

vue

8 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文详细介绍了如何在项目中利用MockJS进行数据模拟，包括安装、配置及在具体页面中的调用过程。通过实例演示了如何创建mock.js文件并设置模拟数据，最后展示了如何在页面中引入并使用mock数据。

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);
                })