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

已于 2023-02-04 15:05:16 修改
阅读量165 收藏
点赞数
文章标签： vue.js 前端 typescript
于 2023-02-04 15:01:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45983109/article/details/128881757
版权

刚学完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"
  },

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

Erxattt5151
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0实现todolist
ll666888999的博客
03-31 1548
项目准备 Vue3.0环境搭建 1、官网安装node，进入node.js官网安装长期支持版 打开终端输入：node -v 如果出现node版本号，表明安装成功 安装node自带npm,包管理工具 输入npm -v 出现npm的版本号 2、安装淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 输入cnpm -v 会出现一系列版本号，说明安装成功 3、安装vue环境：cnpm i -g vue @vue/cli 输入vue -
用vue3做一个todoList
one的博客
06-24 2935
1.用户输入新增的事项点击回车或者添加，事项列表中显示当前添加的事项。 2.事项分为，所有事项、未办事项、已完成事项。新增的事项默认为未办事项。 3.事项的状态：已完成和未办可相互转换。 4.事项可删除。...
vue3+typescript+vite+vant搭建一个移动端项目
最新发布
W_Purplegrape的博客
06-07 1811
本文主要讲解vue3移动端项目如何搭建，在构建项目前请确保已安装node、npm工具，此项目构建主要集成：axios、vant、typescript、vite和vue3，其中还会介绍到如何动态适配尺寸等功能
vue3+ts实现todolist功能
DOM曼珠沙华的博客
08-31 3044
先看一下实现效果： 可以看到内部实现的内容有enter输入，单项删除，全选，以及删除选中项等功能 具体在实现前需要常见有ts的vue3项目 项目创建 具体项目创建 就是 vue create 项目名称 在创建后，选择的时候有vue2和vue3的选择，第三项是自定义，在自定义时需要选中ts(选择的键分别是向下键和空格键) 在创建项目之后，先运行，查看是否可运行 TodoList实现 目录结构： 运行文件：App.vue 组件：components下的文件 ...
vue3基础练习之todoList
weixin_64740434的博客
07-30 484
【代码】vue3基础练习之todoList。
vite+vue3+ts简单例子todolist
jason_renyu的博客
03-01 4779
vue3发布以来备受瞩目，与之起来的vite都是倍感神秘，在这里我们用一个todolist的小例子，来揭秘vue3+vite的面纱。 本文是在《Vite + Vue3 初体验 —— Vue3 篇》的启发下写的，由于原文的代码和过程有一些需要注意的坑点，在这里我们会把步骤详细的整理以及简单的优化。 创建项目 使用vite创建 npm init vite@latest 输入项目名 如 vue-todolist vite可以构建多种框架的项目，这里选用vue 选用vue-ts的组合，如果你对ts还不熟，需要
vue3+vite2+ts+vant3 项目demo
04-16
此项目 按照大佬文章 一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬
Vue3+Vite4+TS 后台模板
06-08
在Vue3+Vite4+TS的后台模板中，TypeScript的使用让项目的结构更加清晰，代码更具可预测性，有助于团队协作和长期维护。 该模板可能包含了以下核心组件和功能： 1. 登录/注册页面：通常会使用Vue Router进行路由...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
vue3+vite+qiankun+monorepo框架
08-03
vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...
vue3+vite+ts 仿淘宝放大镜效果
09-17
在本项目中，我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验，让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
10-16
主要介绍了使用VueCli3+TypeScript+Vuex一步步构建todoList的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用TS写一个Vue版todolist
guxin_duyin的博客
01-17 1119
说实话，之前虽然简单学习过TS，但是一直没在项目中使用过。今天，就尝试了一把，虽然一开始使用有各种不适应，但是不得不说，使用TS写代码确实比用JS写会少很多bug。 话不多说，先了解一下TS是什么东东？ TypeScript是什么？ TS是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TS有什么好处？ TypeScript能从可维护性、...
记录一下用vue3结合ts实现todolist的详细过程，非常适合用ts结合vue快速实战上手项目
edison4499的博客
10-31 270
记录快速用ts结合vue进行实战的详细过程
[vue3]vue3+typescript上手案例：实现todoList
SCUhzs
01-26 2351
前言 todoList是常见的手撸代码题了。通过vue3的composition api实现todoList，掌握setup、ref、reactive、watch、toRefs、toRef等钩子函数，快速上手vue3+ts技术栈。建议有vue2基础的边看官方文档边做，以便快速熟悉相关hook，最后的实现效果图如下： 下面直接上代码。 Index页面 App.vue <template> <div class="todo-container"> <h1>Tod
vue3制作简易版todolist（学习笔记）
weixin_44858541的博客
12-07 1184
知识点 使用vue3开发todolist compositionapi 使用vue3开发todolist 定义一个文本框，用来输入todo事件，并且为这个文本框绑定输入事件 <script> const myview=Vue.creatApp({ template:'<div> <input :value="inputvalue"@input="handleInputChange"/> ..
vue3实现todolist案例
weixin_45730243的博客
05-10 1571
<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完成todolist案例
antRain的博客
12-23 3911
使用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.x+typeScript（toDolist）案例
_小郑有点困了的博客
03-25 558
尝鲜vue3.x+typeScript（toDolist）案例 是借鉴了大佬的demo代码，然后在其基础上进行改写了一些方法。就是感受了下ts的一些语法以及vue3.x的一些新特性。 参考博客：https://blog.csdn.net/qq_44812835/article/details/113195479 拉下来学习了下，简单尝试解读一下代码逻辑。大佬还用了数据库，node，我就是简单的想看下vue3.x新的一些特性以及使用方法，所以就直接屏蔽掉了接口调用那一块，改为localStorage+vueX
vue3+vite+mock实现TodoList
03-26
对于Vue3和Vite的开发环境，需要在项目中安装Vue3和Vite相应的包。然后，通过在Vite配置文件中配置mock数据，实现TodoList数据的模拟。 首先，在项目根目录下安装Vue和Vite： ``` npm install vue@next vite --...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值