由于您并没有明确您想要的
实现方式，以下是使用 Vue3 和 Vite 搭建
TodoList，包括使用 vite-plugin-mock 库进行后端模拟的步骤：
1. 新建
一个 Vue3 项目
使用 Vue CLI 或手动搭建，具体步骤可以参考官方文档。
2. 安装 vite-plugin-mock
在项目根目录下执行：
```
npm install vite-plugin-mock --save-dev
```
3. 创建 mock server
在项目根目录下创建
一个 `mock` 文件夹，在文件夹内创建
一个 `db.js` 文件。 `db.js` 用于存储模拟的数据，例如
Todos：
```js
let
todos = [
{ id: 1, text: 'Buy milk', done: false },
{ id: 2, text: 'Learn Vue', done: false }
];
export default {
todos
}
```
在 `mock` 文件夹内再创建
一个 `api.js` 文件。 `api.js` 中定义每个接口的处理函数，例如获取所有
Todos 的接口：
```js
import db from './db.js'
export default {
'GET /api/
todos': () => {
return {
code: 200,
message: 'success',
data: db.
todos
}
}
}
```
4. 配置 Vite 的 Mock 插件
在 `vite.config.js` 中：
```js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import mock from 'vite-plugin-mock'
export default defineConfig({
plugins: [
vue(),
mock({
mockPath: 'mock',
injectCode: `
import db from './db.js'
export default db;`
})
]
})
```
这段代码中，我们使用了 vite-plugin-mock，并指定了 mockPath 属性和 injectCode 属性。
mockPath 属性定义了我们的 mock 文件夹的路径；
injectCode 属性用于在每个接口处理函数之前注入代码。在这里，我们将 db.js 中的数据导入，并将其默认导出，以便在接口处理函数中使用。
5. 编写 Vue3
组件
在 `src` 目录下新建 `
TodoList.vue` 文件，
实现一个基本的
TodoList：
```html
<template>
<div>
<h1>
Todo List</h1>
<div>
<input type="text" v-model="
todoText" />
<button @click="add
Todo">Add</button>
</div>
<div v-for="
todo in
todos" :key="
todo.id">
<input type="checkbox" v-model="
todo.done" @change="update
Todo" />
<span :class="{done:
todo.done}">{{
todo.text }}</span>
</div>
</div>
</template>
<script>
import { ref, onMounted } from 'vue'
import { get
Todos, update
Todo } from './api.js'
export default {
setup() {
const
todos = ref([])
const fetch
Todos = async () => {
const res = await get
Todos()
if (res && res.code === 200) {
todos.value = res.data
}
}
const
todoText = ref('')
const add
Todo = async () => {
if (
todoText.value.trim()) {
const new
Todo = { id: Date.now(), text:
todoText.value.trim(), done: false }
todos.value.push(new
Todo)
todoText.value = ''
}
}
const update
TodoStatus = async () => {
const res = await update
Todo()
if (!res || res.code !== 200) {
alert('Update
todo failed')
}
}
onMounted(() => {
fetch
Todos()
})
return {
todos,
todoText,
add
Todo,
update
Todo: update
TodoStatus
}
}
}
</script>
<style>
.done {
text-decoration: line-through;
}
</style>
```
这个
组件包含
一个输入框和
一个“添加”按钮，可以添加
一个新的
Todo；还有
一个列表，显示所有
Todos，每个
Todo 包含
一个复选框和
一个描述文本。
我们也在这里使用了从 api.js 中导入的函数。通过这些函数，我们可以向后端服务器发送请求。在这里，由于我们使用了 mkock，因此请求实际上是与 db.js 中的数据
交互。
6. 启动项目
在终端中执行：
```
npm run dev
```
然后在浏览器中打开 http://localhost:3000 查看
TodoList。
最低0.47元/天 解锁文章
197
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
