在Vue 3 + TypeScript项目中配置Mock.js来模拟数据的基本步骤如下：
- 安装Mock.js:
npm install mockjs --save-dev- 在项目中创建一个mock.ts文件，用于配置模拟数据规则。
// mock.ts
import Mock from 'mockjs'
// 模拟数据规则
const data = Mock.mock({
'items|30': [{
id: '@id',
name: '@name',
'age|18-30': 1
}]
})
// 模拟API接口
Mock.mock('/api/users', 'get', () => {
return {
code: 200,
data: data.items
}
})- 在main.ts或其他入口文件中引入mock.ts来启动Mock.js。
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import './mock' // 引入mock配置
const app = createApp(App)
app.mount('#app')- 在组件中发送请求获取模拟数据。
// UserList.vue
<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')
if (response.status === 200) {
users.value = response.data.data
}
} catch (error) {
console.error('Error fetching users:', error)
}
})
return { users }
}
})
</script>在这个例子中，当Vue应用启动时，会加载mock.ts文件，并启动Mock.js。在UserList组件加载时，会向模拟的API('/api/users')发送请求，并获取模拟数据用于展示。这样，你可以在不连接真实后端数据源的情况下进行前端开发和测试。