简单易上手的vue3.0+ts实战小项目！！附带后台接口

最新推荐文章于 2024-07-03 15:32:26 发布
最新推荐文章于 2024-07-03 15:32:26 发布
阅读量1.7w 收藏 137
点赞数 19
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44812835/article/details/113195479
版权
本文分享了一位开发者使用Vue3和TypeScript实现的一个便签应用的开发经验，包括项目介绍、功能演示及开发心得。项目包含了增、删、改、查功能，并配有一个使用Node+Koa+TS+MongoDB搭建的接口服务。开发者强调Vue3的Composition API带来的便利性和TypeScript对代码提示与质量提升的帮助。
摘要由CSDN通过智能技术生成

vue3+Ts项目实战

1.前言

一直想体验一下vue3的开发使用，但是一直在推脱，正好最近也在学习Ts那不如直接做个小项目好了，在找项目的时候发现有的项目都比较大，但是一个经典todoList有显的太单调。😁

拿起手机突然看到我小米手机中的原生便签应用，看起来还不错，于是就有了下面这个小demo。还在犹豫没有上手项目的同学赶快动起来吧！😻

github地址：https://github.com/1034637588/ToDoList

2.项目演示

通过增、删、改、查的顺序进行一下简单的演示✋
在这里插入图片描述

3.项目介绍

其实就是一个简单的vue3全家桶+vant+ts的todoList 不过使用node+koa+ts+mongodb搭建了一个简单的接口服务，也在github中大家可以拉下载在本地运行。这样就有接口可以开发啦！

主要功能有：🐷
1.新增便签
2.修改便签
3.删除便签（长按删除、修改为空删除）
4.搜索便签
5.瀑布流的布局方式，触底更新 等等
当然搜索和加载更多也做了防抖个回流等等。

大家可以看到，待办模块使没有开发的，为了大家可以练习

最低0.47元/天 解锁文章
木木林_
关注
  • 19
    点赞
  • 踩
  • 137
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 25
    评论
专栏目录
vue3+ts入门（todolist案例）
02-10
vue3+ts入门（todolist案例）
TS项目实战四：ts+vue3+elementplus实现登录注册功能
Java、前端、小程序学习笔记、问题汇总、项目实例分享，有需要请联系。
03-08 2151
使用vue3+elementplus+vite+pinia实现用户登录、注册相关界面及对应业务流程的开发，对接express后端服务，调用对应接口，实现完整的用户登录注册功能。TS实战项目三十：Vue3项目创建TS实战项目三十：Vue3项目创建。
vue3.0+ts 封装axios
最新发布
zy991315的博客
07-03 472
vue3.0+ts 封装axios
如何在 Vue3 组件中使用 TS 类型，看完这篇就够了
前端达人
10-08 1万+
作者：前端阿飞https://juejin.cn/post/7129130323148800031要说今年最热门的前端技术，Vue3 和 TS 绝对榜上有名了。据了解，已经有很多公司在使用 Vue3 + TS + Vite 开发新项目了。那么我们也不能落后，今天就给大家分享一下如何在 Vue3 组件中结合 Composition-Api 使用 TS 类型。如果有不会或者不熟的小伙伴，一起学起来吧！...
vue3实现todolist案例
weixin_45730243的博客
05-10 1595
<template> <div> <!-- 新增todo --> <input type="text" v-model="newTodo" @keyup.enter="addTodo" autofocus placeholder="新增今日待办" autocomplete="off"> <!-- todo列表 --> <ul> <li v-for="todo in fi.
VUE3 引入富文本插件 CKEditor5
鹤渺的星球
04-07 4487
vue3的可选择的富文本插件很多，这次的业务需求只是简单的文字加粗，换行等，不需要图片文件等的功能，所以我暂且需要的是简单的富文本编辑器， 查找一些资料，最后选择的CKEditor5，选它是因为它开源，可免费使用到商业用途。之前尝试了tinymce，但是公司不打算申请apikey，所以alert提示框的问题解决不了……具体见文末。
用 vite 构建 vue3 + TS 项目实战
热门推荐
weixin_37883657的博客
04-26 1万+
1、项目初始化 npm install create-vite@2.9.0 -g // 全局安装 create-vite npm init @vitejs/app shop-admin // 初始化项目(shop-admin 项目名) cd shop-admin npm install npm run dev 2、eslint 基础配置 npm install eslint --save-dev npm install@eslint/create-confi...
drag-demo:基于vue3.0 + ts的可视化组件拖拽demo
03-10
在本项目"drag-demo"中，我们探讨了一个基于Vue 3.0和TypeScript的可视化组件拖放（drag-and-drop）实现。这个演示利用了Vite作为构建工具，以及Vant UI库来增强用户界面。以下是对这些技术的详细解释： 1. **Vue ...
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0后台管理系统
05-02
Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+Element-Plus+Echarts 5.0+Axios 开发的后台管理系统 Vue 3.0+Vite 2.0+Vue-Router4.0+...
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端）.zip
05-02
Vue3.0+TypeScript+Element-Plus编写的一套后台管理系统（兼容移动端），使用了最新的vue3 vite2 Element-Plus TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。 Vue3.0+TypeScript+...
基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板
10-15
总之，"基于vue-cli / vite + vue3.0 + antd2.0 + ts4.0 的后台管理系统模板"是一个结合了前沿技术的项目，它集成了前端开发的最佳实践，为开发者提供了一个高效、稳定且美观的开发起点。通过深入理解和运用这些技术...
毕业设计基于Vue3.0+Ts的医疗服务平台前端
11-02
【标题】"毕业设计基于Vue3.0+Ts的医疗服务平台前端" 描述了一项针对学生毕业设计的项目，该平台使用了最新的Vue.js版本3.0并结合TypeScript进行开发，专注于创建一个医疗服务平台的前端部分。Vue3.0是Vue.js框架的...
vue3+ts部分场景示例
Debug的博客
11-22 1456
【代码】vue3+ts部分场景示例。
搭建一个vue3+ts项目（超祥/必看）
c_qianxia5040的博客
07-24 1万+
Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的state、并添加甚至删除state、actions和getters。@types/node 模块 在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。当修改代码时，HMR。能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。
vite+vue3+ts简单例子todolist
jason_renyu的博客
03-01 4802
vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。 本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。 创建项目 使用vite创建 npm init vite@latest 输入项目名 如 vue-todolist vite可以构建多种框架的项目，这里选用vue 选用vue-ts的组合，如果你对ts还不熟，需要
使用vue3完成todolist案例
antRain的博客
12-23 4015
使用vue3完成todolist案例参考遇到的问题 参考 尚硅谷2021最新Vue.JS教程快速入门到项目实战（Vue3/VueJS技术详解） Vue3+TS 快速上手 组件层次关系 遇到的问题 ESLint 规则: eslint-disable vue/no-mutating-props 源代码 <input type="checkbox" v-model="todo.isCompleted" /> 按照规则修改 <input type="checkbox" :checked
vue3+vite+ts的Todolist练手小项目
weixin_45983109的博客
02-04 176
vue3+vite+ts的Todolist练手小项目
Vue3 + TS + Vite 项目实战 —— 大屏可视化
技术前端，忠于热爱 @0.活在风浪里
06-12 5472
大屏可视化项目实战
vue3+ts项目实战一
qelen的博客
09-27 358
vue3学习笔记
vue3+ts练习页面
09-28
这篇引用内容提到了一个Vue3 TypeScript实战项目，使用了ElementUI搭建页面，实现了展示、搜索、分页、编辑等功能。如果你想在Vue3中使用TypeScript，可以参考这个项目，通过页面展示、搜索、分页、编辑等功能的实现来进行练习。 你可以点击这个链接查看原博客的详细内容：https://blog.csdn.net/u010356768/article/details/125594649
评论 25
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木木林_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值