【Vue3 | 实现精美待办】01.项目启航

今天更新的是《Vue3 | 实现精美的待办》系列文章，波吉会带大家学一下Vue3。通过做一个小的待办项目，把 Vue3 中常用到的知识点串联起来，为避免篇幅过长，我将分成多期进行讲解~

先来看下最终实现效果~

你好，我是波吉，今天这期是对接下来要做的待办项目进行概述。 我会把项目最终成果的源码放在 github 上，有需要的同学可以下载下来（包括完整的前后端代码及数据库文件，需要自用的同学，下载下来运行就可以了~），也希望你花几秒钟的时间帮我点个 star~❤这将是我持续创作的动力！

后续的几期，我不会像文档一样把各个API罗列出来（因为肯定写得没有文档全面~直接看文档就好了），而是将该项目分解成多个部分，每个部分我们会学习到 Vue3 中的几个知识点，让你学起来没有压力~

1. 项目技术栈

前端：Vue3 + TypeScript
后端：Koa2（非本系列讨论内容）
数据库：MySQL（非本系列讨论内容）

2. 我能学到什么？

Vue3 项目从0到1的上线，包括创建、打包、部署
TypeScript 的基本使用
ElementPlus 组件库的使用
最常用的 Vue3 相关知识点，初步具备 Vue3 项目开发能力
1. 响应式数据
2. 路由跳转
3. 使用 pinia 实现全局状态管理
4. script setup 语法
5. 注册全局组件
6. Vue3 中使用svg

3. 待办项目那么多，为什么还做？

笔者本人使用过多款待办软件，像滴答清单、小番茄等，而我最想要的一个 专注功能 却没有找到合适的。像小番茄，开启番茄计时后整个界面是红色的，放在桌面上视线会被不自主地干扰（如下图，这里没有任何贬义的意思，我自己本人是很喜欢这款软件，为此还充了会员~只不过对于我这种注意力不太容易集中的人感觉不太合适）

没有 专注模式的情况下是怎么样的？先来看下面这张图，对我自己而言，经常在做着A事情时，突然看到B事情还没做，会很容易注意力分散。

因此，我希望有一个 专注模式，来帮助我自己在视野可见范围内，只有一件事需要当下进行处理，效果图如下（《认知觉醒》中提到，做更少的事，效率效果都会更好）

说做就做！正好学完了 Vue3，实践一个项目来巩固知识，因此有了本项目~

4. 后续文章安排

❤ 本系列文章分为如下内容，近期会持续更新，推荐收藏起来，跟着波吉一步一步开发属于你自己的待办！

项目初始化，搭建基础框架（待写）
实现基础组件，全局注册使用（待写）
对接接口，实现数据增删改查（待写）
实现专注模式（待写）