麻雀虽小，五脏俱全，小小的一个todoList，只需要一页，具备增删查改，交互也相对简单，不依赖视觉设计，想必各位前端er在学习各种框架的过程中写了无数次todoList，这次学习compositionAPI第一个想到的也是做一个todoList，就顺势给摸了出来。
完成todoList的方式五花八门，可以很简单，也可以很复杂，从入门学习某个框架来说，用尽可能原始、不掺和其他依赖库（像什么vuex、axios、pinia 等等，在还没学习到框架本身的同时还增加了学习依赖库的成本)、同时代码还精简的方式就好了。
本项目你只需喝个茶的时间，就能掌握compositionAPI(setup语法糖)的入门、父传子（props)、子传父(emit)的使用,以及comoposables的抽离:smiley_cat:
"dependencies": {
"vue": "^3.2.45"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"typescript": "^4.9.3",
"vite": "^4.0.0",
"vue-tsc": "^1.0.11"
}
vite是当下很火热的前端开发与构建工具，意在提供开箱即用的配置，同时它的插件API和JavaScript API 带来了高度的可扩展性，并有完整的类型支持。如果你还在使用webpack，不如尝试一下vite吧！
由于Typescript的趋势不可阻挡，笔者也使用了vue3-typescript，对于学过java这种强类型语言的我来说，上手并不难，如果你在这之前还未看过Typescript,可以先预览一下文档
src
├─App.vue
├─global.d.ts 全局interface
├─main.ts
├─composables 组合式函数
| ├─useFilteredTodos.ts
| ├─useTodos.ts
| └userEmitAddTodo.ts
├─components 组件文件
| ├─TodoAdd.vue
| ├─TodoFilter.vue
| ├─TodoList.vue
| └TodoListItem.vue
|
index.html
组合式函数（composables function)是vue3新出的概念的，功能是用compositionAPI来封装可复用有状态逻辑的函数，当它不是用compositionAPI封装时，和我们正常封装utils也就是一样的了
想学习可以前往我的blog看一下
可以手动下载，或者通过git clone到本地
git clone https://github.com/ooooshino/TodoList.git成功之后再通过下面的命令下载依赖包
# 进入项目根目录
cd TodoList
# 安装依赖
npm install
# 或者你也可以使用pnpm
pnpm install
# 使用 npm 或者 pnpm 取决于你，用两条命令执行其中一条就好了，需要注意的是，如果你使用pnpm，你需要提前安装好pnpm让你的项目跑起来
#npm
npm run dev
#pnpm
pnpm dev当上面的指令你都执行完了，即可通过 http://localhost:3000访问了
❗当端口被占用时请通过修改vite.config.ts下的port字段来修改端口❗
server: {
port: 3000,
}