Vue3 框架和 Vite 工具提供了
Mock 的功能，可以在开发过程中模拟接口数据。
首先，创建一个基础的 TodoList 示例工程，包括“添加任务”、“删除任务”和“显示所有任务”等功能。
main.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
createApp(App).mount('#app')
```
App.vue
```vue
<template>
<div id="app">
<h1>Todo List</h1>
<input v-model="task" placeholder="Type new task here..." />
<button @click="addTask">Add</button>
<ul>
<li v-for="(item, index) in tasks" :key="index">
{{ item }}
<button @click="removeTask(index)">x</button>
</li>
</ul>
</div>
</template>
<script>
export default {
setup() {
const tasks = vue.reactive([])
const addTask = () => {
tasks.push(task.value)
task.value = ''
}
const removeTask = (index) => {
tasks.splice(index, 1)
}
const task = vue.ref('')
return {
tasks,
task,
addTask,
removeTask,
}
},
}
</script>
```
index.html
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>Todo List</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.js"></script>
</body>
</html>
```
按照以上代码编写完毕之后，我们开启
Mock 功能，使数据接口的
mock 可以生效。
1.使用 vite-plugin-
mock 插件安装
Mock 功能。
```bash
npm install vite-plugin-
mock --dev
```
2.在 vite.config.js 中进行配置。
```javascript
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { create
MockMiddleware } from 'vite-plugin-
mock'
export default defineConfig({
plugins: [vue(), create
MockMiddleware()],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
```
3.添加
Mock 数据文件，文件路径为`src/
mocks/api/TodoList.js`。
src/
mocks/api/TodoList.js
```javascript
//
Mock data
const tasks = [
{ id: 1, value: '
Learn Vue 3' },
{ id: 2, value: 'Continue working on Todo list' },
{ id: 3, value: 'Buy groceries' },
]
// API endpoints
export default {
'GET /api/tasks': () => {
return tasks
},
'POST /api/tasks': (req) => {
const newTask = {
id: tasks.length + 1,
value: req.body.task,
}
tasks.push(newTask)
return newTask
},
'DELETE /api/tasks/:id': (req) => {
const taskId = parseInt(req.params.id)
const index = tasks.findIndex((task) => task.id === taskId)
if (index !== -1) {
tasks.splice(index, 1)
}
return {}
},
}
```
4.在 main.js 中引入
Mock 数据文件，从而启动
Mock 服务。
main.js
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import '@/
mocks'
createApp(App).mount('#app')
```
5.测试是否启动成功。
启动执行`npm run dev`之后，打开浏览器，访问`http://localhost:3000/api/tasks`，可看到我们的
mock 数据。
此时我们对 TodoList 进行的增删改操作也将默认使用我们刚刚配置好的 api/TodoList.js 进行
mock 数据的读写操作。
由于博客内容为空，无法提供包含关键信息的摘要。
扫一扫
557
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
