今天更新的是
《Vue3 | 实现精美的待办》
系列文章,波吉 会带大家学一下Vue3
。通过做一个小的待办项目,把 Vue3 中常用到的知识点串联起来,为避免篇幅过长,我将分成多期进行讲解~
先来看下最终实现效果~
你好,我是波吉,今天这期是对接下来要做的待办项目进行概述。 我会把项目最终成果的源码放在 github 上,有需要的同学可以下载下来(包括完整的前后端代码及数据库文件
,需要自用的同学,下载下来运行就可以了~),也希望你花几秒钟的时间帮我点个 star~❤这将是我持续创作的动力!
后续的几期,我不会像文档一样把各个API罗列出来(因为肯定写得没有文档全面~直接看文档就好了),而是将该项目分解成多个部分,每个部分我们会学习到 Vue3 中的几个知识点,让你学起来没有压力~
1. 项目技术栈
- 前端:Vue3 + TypeScript
- 后端:Koa2(非本系列讨论内容)
- 数据库:MySQL(非本系列讨论内容)
2. 我能学到什么?
- Vue3 项目从
0到1
的上线,包括创建、打包、部署 TypeScript
的基本使用ElementPlus
组件库的使用- 最常用的 Vue3 相关知识点,初步具备 Vue3 项目开发能力
- 响应式数据
- 路由跳转
- 使用
pinia
实现全局状态管理 script setup
语法- 注册全局组件
- Vue3 中使用
svg
3. 待办项目那么多,为什么还做?
笔者本人使用过多款待办软件,像滴答清单、小番茄等,而我最想要的一个 专注功能
却没有找到合适的。像小番茄,开启番茄计时后整个界面是红色的,放在桌面上视线会被不自主地干扰(如下图,这里没有任何贬义的意思,我自己本人是很喜欢这款软件,为此还充了会员~只不过对于我这种注意力不太容易集中的人感觉不太合适)
没有 专注模式
的情况下是怎么样的?先来看下面这张图,对我自己而言,经常在做着A事情时,突然看到B事情还没做,会很容易注意力分散。
因此,我希望有一个 专注模式
,来帮助我自己在视野可见范围内,只有一件事需要当下进行处理,效果图如下(《认知觉醒》中提到,做更少的事,效率效果都会更好)
说做就做!正好学完了 Vue3,实践一个项目来巩固知识,因此有了本项目~
4. 后续文章安排
❤ 本系列文章分为如下内容,近期会持续更新,推荐收藏起来,跟着波吉一步一步开发属于你自己的待办!
- 项目初始化,搭建基础框架(待写)
- 实现基础组件,全局注册使用(待写)
- 对接接口,实现数据增删改查(待写)
- 实现专注模式(待写)