Vue.js 实现 ToDo 应用：项目概述

在本系列中，你将一步步用 Vue.js 实现一个功能完整的 ToDo 应用。通过这个项目，你可以学会如何在实际开发中使用 Vue 的核心功能，比如组件、数据绑定、事件处理、条件渲染、表单处理等。更重要的是，你会掌握如何将这些零散的知识点整合成一个完整的应用。

提示

项目完整代码可在 GitHub 获取。

项目目标

你将构建一个具有以下基本功能的 ToDo 应用：

• ✅ 添加待办事项
• ✅ 删除待办事项
• ✅ 标记完成状态
• ✅ 切换全部 / 未完成 / 已完成的过滤视图
• ✅ 本地存储数据（可选进阶）

最终效果大致如下：

+---------------------------------------+
| ✅ 学 Vue                              |
| ⬜ 写 ToDo 应用                        |
| ⬜ 学习组件通信                        |
+---------------------------------------+
[ 全部 ] [ 未完成 ] [ 已完成 ]

项目结构预览

你将使用 Vite 创建 Vue 项目，并采用组件化结构组织代码：

src/
├── components/
│   ├── TodoItem.vue
│   ├── TodoInput.vue
│   └── TodoFilter.vue
├── App.vue
└── main.js

每个组件都只关注一件事情，方便维护和复用。

技术栈

为了保持简单易学，本项目会使用以下技术栈：

技术	用途
Vue 3.x	构建用户界面
Vite	构建工具，极速热更新
Composition API（组合式 API）	更现代的 Vue 写法
CSS 或 Tailwind	样式美化（可选）

你不需要使用 Vuex、Pinia、Router 等更重的库，聚焦核心功能即可。

项目功能拆解

整个 ToDo 应用的开发会分为多个部分，每个部分都以实战驱动学习：

步骤	内容
1	创建项目，初始化页面
2	实现添加、删除待办项功能
3	实现任务编辑与状态管理（过滤视图，如全部/已完成等状态）
5	使用 localStorage 保存数据（本地存储）

每一步你都会写一些代码、解决具体问题，并理解 Vue 的背后原理。

准备开始！

在下一篇中，你将从零创建一个 Vue 项目并搭建基础页面结构。别担心，一切都会从最简单的步骤开始，你只需要跟着操作即可。