mockjs在vue3中使用

Mock.js是一个模拟数据生成工具，可以模拟各种类型的数据，如字符串、数字、布尔值、数组、对象等。在Vue 3中使用Mock.js可以很方便地模拟后端数据，提高开发效率。

要在Vue 3中使用Mock.js，需要先安装相应的包。可以使用npm或yarn进行安装，具体命令如下：

npm install mockjs --save 或 yarn add mockjs

安装好后，就可以在Vue 3项目中引入Mock.js，具体代码如下：

import Mock from 'mockjs';
// 构造数据
Mock.mock('/api/data', 'get', {
'list|1-10': [{
'id|+1': 1,
'name': '@cname',
'age|20-30': 25
}]
});

在这个例子中，我们使用Mock.js模拟一个后端接口/api/data，返回一个包含10个对象的list数组，每个对象包含id、name和age属性。其中id自增1，name随机生成中文名字，age范围在20-30之间。

最后，在Vue 3项目中使用这个数据，只需要在组件中发起请求，获取数据就可以了。具体代码如下：

import axios from 'axios';
export default {
data() {
return {
list: []
}
},
created() {
axios.get('/api/data').then((res) => {
this.list = res.data.list;
})
}
}

这样就可以很方便地使用Mock.js模拟后端数据，提高开发效率。同时，Mock.js也支持数据模板配置、随机数据、数据类型等功能，具体可参考Mock.js的官方文档。