vue3+vite+mock实现TodoList

对于Vue3和Vite的开发环境，需要在项目中安装Vue3和Vite相应的包。然后，通过在Vite配置文件中配置mock数据，实现TodoList数据的模拟。

首先，在项目根目录下安装Vue和Vite：

npm install vue@next vite --save-dev

然后，在Vite的配置文件vite.config.js中配置mock数据：

module.exports = {
  server: {
    // 模拟API
    // 然后在api路径下，也就是在example/src/api路径下，
    // 根据接口路径，创建对应名称的.js文件，如/todo.js
    port: 3000,
    open: true,
    // 这里需要配置一下，否则会断开连接
    cors: true,

    // 利用中间件，可以实现 mock 数据
    // https://www.cnblogs.com/zero--007/p/11227108.html
    // 具体的编写方式可以参考上述链接
    middleware: [createMockMiddleware()],
  },
};

其中，createMockMiddleware()方法是自定义的mock函数，示例代码如下：

const { createMockMiddleware } = require('vite-plugin-mock');

// 模拟数据
const todoData = [
  { id: 1, label: "学习Vue3", done: false },
  { id: 2, label: "学习Vite", done: false },
  { id: 3, label: "学习TypeScript", done: true },
  { id: 4, label: "整理网络知识", done: false },
]

module.exports = function () {
  return createMockMiddleware({
    // 基于api路径，返回对应的数据
    // 比如，在example/src/api/todo.js，就可以定义获取todoList数据的方法
    // 比如：
    // export default [
    //   {
    //     url: '/api/todo/list',
    //     method: 'post',
    //     response: () => {
    //       return {
    //         code: 200,
    //         data: todoData
    //       }
    //     }
    //   },
    // ];
    mockFiles: "src/api/*.js",
  });
};

在api路径下，就可以创建对应名称的js文件，如/todo.js。在该文件中，就可以定义获取todoList数据的方法，示例代码如下：

const todoData = [
  { id: 1, label: "学习Vue3", done: false },
  { id: 2, label: "学习Vite", done: false },
  { id: 3, label: "学习TypeScript", done: true },
  { id: 4, label: "整理网络知识", done: false },
];

export default [
  {
    url: "/api/todo/list",
    method: "post",
    response: () => {
      return {
        code: 200,
        data: todoData,
      };
    },
  },
];

最后，在组件中使用api路径，获取todoList数据：

import { reactive, toRefs, onMounted } from "vue";
import axios from "axios";

export default {
  setup() {
    const state = reactive({
      todoList: [],
    });

    // 获取 todoList 数据
    const getTodoList = () => {
      axios.post("/api/todo/list").then((res) => {
        state.todoList = res.data.data;
      });
    };

    // 组件加载时执行获取 todoList 数据
    onMounted(() => {
      getTodoList();
    });

    // 最后需要将响应式对象转换为普通对象
    return { ...toRefs(state) };
  },
};

这样就可以实现Vue3和Vite环境下的TodoList数据模拟。请注意，本示例仅是提供了一个参考，实际的代码实现可能需要更加详细、复杂的设计，具体的实现方式可以参考Vue和Vite的官方文档，或者搜索相关的博客、论坛等。