vue3+vite+ts的Todolist练手小项目

刚学完vue3 于是趁热打铁做了一个小的todolist

 gitte地址

 项目中引入的相关依赖方便了解

  "dependencies": {
    "animate.css": "^4.1.1",
    "pinia": "^2.0.30",
    "vant": "^3.2.5",
    "vue": "^3.2.45",
    "vue-masonry": "^0.16.0",
    "vue-router": "^4.1.6"
  },

项目中的数据是死数据,暂时没有接入后端

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
对于Vue3和Vite的开发环境,需要在项目中安装Vue3和Vite相应的包。然后,通过在Vite配置文件中配置mock数据,实现TodoList数据的模拟。 首先,在项目根目录下安装VueVite: ``` npm install vue@next vite --save-dev ``` 然后,在Vite的配置文件vite.config.js中配置mock数据: ```javascript 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函数,示例代码如下: ```javascript 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数据的方法,示例代码如下: ```javascript 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数据: ```javascript 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数据模拟。请注意,本示例仅是提供了一个参考,实际的代码实现可能需要更加详细、复杂的设计,具体的实现方式可以参考VueVite的官方文档,或者搜索相关的博客、论坛等。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值