第 6 章：实战项目 1 - 个人待办事项应用 (Vibe Todo)
🎯 本章目标：
本章我们将运用之前学到的所有技巧（CRCO 框架、分步拆解、Vibe 人设），从零开始构建一个高颜值的 "Vibe Todo" 应用。
技术栈：React + Vite + Tailwind CSS (这是 Vibe Coding 的"黄金三角")
33%
33%
33%
6.1 需求分析与项目规划
在开始写代码之前，先把 Cursor 放在一边。我们需要先"想"清楚。
我们要做什么？
一个不仅仅能用，还要"好看且好用"的待办事项列表。
核心功能 (MVP)
新增：输入任务，回车或点击按钮添加。
展示：列表展示任务，区分完成/未完成状态。
交互：点击勾选完成，点击删除图标移除。
持久化：刷新页面后数据不丢失（LocalStorage）。
Vibe：玻璃拟态风格，流畅的微交互动画。
6.2 第一步：让 AI 生成项目骨架
打开 Cursor，按下 Ctrl + I (Composer)，输入以下"开天辟地"的指令。这个指令使用了 CRCO 框架。
📢 提示词 1：初始化项目
代码块
Plain Text
[Context]
我要做一个极简主义风格的待办事项应用，名为 "Vibe Todo"。
[Requirement]
请帮我初始化一个 React + Vite + Tailwind CSS 的项目结构。
点击 Apply (或 Save All)，你会看到 Cursor 疯狂地开始创建文件和写代码。
🔍 检查点：你的文件结构
AI 生成完成后，左侧文件栏应该类似于：
代码块
Plain Text
vibe-todo/
├── index.html
├── src/
│ ├── App.tsx
│ ├── main.tsx
│ └── index.css
🚀 启动引擎
在底部的终端 (Terminal) 中输入：
代码块
Plain Text
npm install # 安装 React 等依赖 (如果 AI 没自动帮你装)
npm run dev # 启动开发服务器
按住 Ctrl 点击终端里的 http://localhost:5173，你应该能看到一个黑色背景的空白页面了。
6.3 分模块实现
骨架有了，现在我们用 "切香肠法" 逐步完善功能。
📢 提示词 2：实现核心列表逻辑
选中文本框或 App.tsx，按下 Ctrl + K (Edit)：
代码块
Markdown
[Requirement]
请完善 Todo 的核心逻辑：
1. 这里有一组初始数据（mock data）。
2. 实现 addTodo 函数：添加新任务到列表顶部。
3. 实现 toggleTodo 函数：切换完成状态。
4. 实现 deleteTodo 函数：删除任务。
[Constraints]
- 使用 React useState 管理状态。
- **ID 生成**：为简化起见，使用浏览器原生的 `crypto.randomUUID()`，不要引入额外的 uuid 库。
- 每个 Todo 对象包含 id, text, completed, createdAt。
注意：如果生成的代码里引用了 lucide-react 但报错找不到模块，请手动运行 npm install lucide-react。
📢 提示词 3：持久化 (LocalStorage)
功能跑通了，能在页面点点点了？好，下一步。
代码块
Plain Text
[Context]
现在的 App 刷新页面数据就没了。
[Requirement]
请修改状态管理逻辑：
1. 初始化时从 LocalStorage 读取 'vibe-todo-data'。
2. 当 todos 发生变化时，自动同步到 LocalStorage。
[Constraints]
- 使用 useEffect 实现副作用。
- 注意处理 JSON 解析失败的异常情况。
6.4 调试与优化 (Debugging & Polish)
这时候你可能会遇到问题，或者觉得界面不够 Vibe。
场景 A：样式太丑
目前可能只是个普通的白底黑字列表。让我们注入 Vibe。
提示词： "你是一个UI 设计大师。请重构 App 的 CSS：
给卡片添加玻璃拟态效果 (Glassmorphism)，半透明背景 + 模糊 + 细微边框。
按钮添加 hover 发光效果。
完成的任务文字添加删除线，并变灰。
整个容易居中显示，最大宽度 600px。"
场景 B：出现 Bug
假设你发现：输入空格也能添加任务。
提示词（利用 5.2 节的模板）： "目前有一个 Bug：我在输入框只输入空格，按回车也能添加任务。 请修复：在 addTodo 前添加校验，如果是空字符串或纯空格，不执行添加，并弹出简单的 alert 提示。"
6.5 项目总结与复盘
恭喜！你刚刚完成了第一个 Vibe Coding 项目。
关键回顾
从大到小：先让 AI 生成骨架，再填充血肉（逻辑），最后穿衣服（样式）。
人设注入：通过指定 "UI 设计大师"，我们瞬间把一个由程序员审美的 App 提升到了设计水平。
零迷茫：因为使用了 CRCO，AI 一次错了也没关系，我们通过迭代对话修正了它。