vue3+vite+mock实现TodoList

由于您并没有明确您想要的实现方式，以下是使用 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：

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 的接口：

import db from './db.js'

export default {
  'GET /api/todos': () => {
    return {
      code: 200,
      message: 'success',
      data: db.todos
    }
  }
}

4. 配置 Vite 的 Mock 插件

在 `vite.config.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：

<template>
  <div>
    <h1>Todo List</h1>
    <div>
      <input type="text" v-model="todoText" />
      <button @click="addTodo">Add</button>
    </div>
    <div v-for="todo in todos" :key="todo.id">
      <input type="checkbox" v-model="todo.done" @change="updateTodo" />
      <span :class="{done: todo.done}">{{ todo.text }}</span>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getTodos, updateTodo } from './api.js'

export default {
  setup() {
    const todos = ref([])

    const fetchTodos = async () => {
      const res = await getTodos()
      if (res && res.code === 200) {
        todos.value = res.data
      }
    }

    const todoText = ref('')

    const addTodo = async () => {
      if (todoText.value.trim()) {
        const newTodo = { id: Date.now(), text: todoText.value.trim(), done: false }
        todos.value.push(newTodo)
        todoText.value = ''
      }
    }

    const updateTodoStatus = async () => {
      const res = await updateTodo()

      if (!res || res.code !== 200) {
        alert('Update todo failed')
      }
    }

    onMounted(() => {
      fetchTodos()
    })

    return {
      todos,
      todoText,
      addTodo,
      updateTodo: updateTodoStatus
    }
  }
}
</script>

<style>
.done {
  text-decoration: line-through;
}
</style>

这个组件包含一个输入框和一个“添加”按钮，可以添加一个新的 Todo；还有一个列表，显示所有 Todos，每个 Todo 包含一个复选框和一个描述文本。

我们也在这里使用了从 api.js 中导入的函数。通过这些函数，我们可以向后端服务器发送请求。在这里，由于我们使用了 mkock，因此请求实际上是与 db.js 中的数据交互。

6. 启动项目

在终端中执行：

npm run dev

然后在浏览器中打开 http://localhost:3000 查看 TodoList。