notes/todo-app/使用指南.md

Vue 待办事项应用 - 使用指南

项目概述

这是一个基于 Vue 3 和 Vite 构建的现代化待办事项管理应用，使用了 Composition API 和响应式系统。

快速开始

1. 环境要求

• Node.js 版本 16.0 或更高
• npm 或 yarn 包管理器

2. 安装与运行

# 进入项目目录
cd todo-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产版本
npm run preview

3. 访问应用

开发服务器启动后，在浏览器中访问 http://localhost:5173

功能使用说明

📝 添加待办事项

1. 在顶部输入框中输入待办内容
2. 点击"添加"按钮或按回车键确认添加
3. 新事项将出现在列表中

✅ 管理待办事项

• 标记完成: 点击事项前的复选框
• 修改状态: 再次点击复选框可取消完成状态
• 删除事项: 点击右侧的"删除"按钮

🔍 筛选查看

应用提供三种查看模式：

• 全部: 显示所有待办事项
• 未完成: 只显示未完成的事项
• 已完成: 只显示已完成的事项

每个筛选按钮显示对应类型的事项数量。

🧹 批量操作

• 清除已完成: 点击底部"清除已完成"按钮，删除所有已完成的事项
• 统计显示: 底部显示剩余未完成事项的数量

界面特性

🎨 视觉反馈

• 悬停效果: 鼠标悬停时显示阴影效果
• 状态变化: 已完成事项显示删除线和半透明效果
• 按钮状态: 当前筛选条件高亮显示

📱 响应式设计

• 最大宽度 600px，在各种屏幕尺寸下都有良好体验
• 灵活的布局适配不同设备

🎯 用户体验

• 自动对焦: 页面加载时输入框自动获得焦点
• 快捷键: 支持回车键快速添加
• 空状态: 无待办事项时显示友好提示

技术特点

Vue 3 Composition API

• 使用 <script setup> 语法
• 响应式数据管理 (ref, computed)
• 现代化的组件开发模式

核心功能实现

• 数据持久化: 使用内存存储（可扩展为 localStorage）
• 状态管理: 响应式数据自动更新视图
• 事件处理: 完整的用户交互支持

项目结构

todo-app/
├── src/
│   ├── App.vue          # 主组件
│   ├── main.js          # 应用入口
│   └── assets/          # 静态资源
├── public/              # 公共资源
├── package.json         # 项目配置
└── vite.config.js       # 构建配置

扩展建议

1. 数据持久化: 添加 localStorage 支持
2. 编辑功能: 支持双击编辑待办内容
3. 分类管理: 添加标签或分类功能
4. 优先级: 为待办事项添加优先级标记
5. 到期时间: 支持设置截止日期

学习价值

这个项目适合Vue初学者，涵盖了：

• Vue 3 基础语法
• 响应式数据管理
• 事件处理
• 条件渲染
• 列表渲染
• 计算属性
• CSS 样式绑定

通过实践这个项目，可以掌握Vue现代开发的核心概念和最佳实践。