114 lines
3.1 KiB
Markdown
114 lines
3.1 KiB
Markdown
# Vue 待办事项应用 - 使用指南
|
||
|
||
## 项目概述
|
||
这是一个基于 Vue 3 和 Vite 构建的现代化待办事项管理应用，使用了 Composition API 和响应式系统。
|
||
|
||
## 快速开始
|
||
|
||
### 1. 环境要求
|
||
- Node.js 版本 16.0 或更高
|
||
- npm 或 yarn 包管理器
|
||
|
||
### 2. 安装与运行
|
||
```bash
|
||
# 进入项目目录
|
||
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现代开发的核心概念和最佳实践。 |