vue3+ts使用mock

你可以使用Mock.js来在Vue 3 + TypeScript项目中进行模拟数据。

首先，你需要安装Mock.js。在你的项目中打开终端，并运行以下命令：

npm install mockjs --save-dev

安装完成后，你可以创建一个`mock`文件夹来存放模拟数据。在该文件夹下，创建一个名为`index.ts`的文件，并编写以下代码：

import Mock from 'mockjs';

Mock.mock('/api/data', 'get', {
  'list|5': [{
    'id|+1': 1,
    'name': '@cname',
    'age|18-60': 1,
    'email': '@email',
  }],
});

export default Mock;

上述代码会模拟一个GET请求`/api/data`，返回一个包含5个对象的数组。每个对象包含id、name、age和email属性。

接下来，在你的Vue组件中，你需要导入并启用Mock.js。可以在`main.ts`文件中添加以下代码：

import { createApp } from 'vue';
import App from './App.vue';
import Mock from './mock';

const app = createApp(App);
Mock; // 启用Mock.js

app.mount('#app');

现在，当你在Vue组件中发起GET请求`/api/data`时，Mock.js会拦截该请求并返回模拟数据。

请确保在生产环境中禁用Mock.js，以避免模拟数据影响正式运行的应用程序。

希望对你有所帮助！如有更多问题，请随时提问。