在Vue 3 + TypeScript 项目中使用Mock.js可以帮助你在开发过程中模拟后端数据，而不用依赖实际的后端接口。以下是一个简单的例子，展示如何在Vue 3项目中使用Mock.js：
- 安装Mock.js：
npm install mockjs --save-dev- 在项目中创建一个mock数据文件，例如
mock/data.ts：
import Mock from 'mockjs'
const data = Mock.mock({
'items|30': [{
id: '@id',
name: '@name',
'age|18-30': 1
}]
})
export default data- 创建一个mock服务器文件，例如
mock/index.ts：
import Mock from 'mockjs'
import data from './data'
Mock.mock('/api/users', 'get', data.items)- 在
main.ts或其他初始化文件中启动Mock服务：
import './mock'
// ... Vue 应用的创建和挂载代码- 在组件中使用Mock数据：
<template>
<div>
<ul>
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.age }}
</li>
</ul>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue'
import axios from 'axios'
export default defineComponent({
setup() {
const users = ref<any[]>([])
onMounted(async () => {
try {
const response = await axios.get('/api/users')
users.value = response.data
} catch (error) {
console.error('Error fetching users:', error)
}
})
return { users }
}
})
</script>在这个例子中，我们首先安装了mockjs。然后，我们创建了一个模拟数据文件data.ts，使用Mock.js生成了一些用户数据。在index.ts文件中，我们设置了一个Mock服务器，它监听/api/users路径的GET请求，并返回模拟数据。在Vue组件中，我们使用axios发送GET请求到/api/users，并将返回的数据赋值给组件的users响应式属性，然后在模板中遍历展示用户信息。