很多人听说 Claude Code 很强，但不知道实际能用来做什么。本文通过一个完整的实战案例——从零开始用 Claude Code 搭建带认证的全栈 Todo 应用——展示它的真实工作流程。
项目目标
- 前端：React + TypeScript
- 后端：Node.js + Express
- 数据库：SQLite（本地开发）
- 功能：用户注册/登录、Todo 增删改查、按状态筛选
- 时间目标：30 分钟
准备工作
安装 Claude Code（如果还没有）：
bash
curl -fsSL https://claude.ai/install.sh | bash创建项目目录：
bash
mkdir todo-app && cd todo-app
claudeStep 1：让 Claude 规划架构（5 分钟）
不要直接让它写代码。先用 Plan Mode 做架构规划：
bash
claude --permission-mode plan然后：
我要搭建一个全栈 Todo 应用，技术栈：
- 前端：React 18 + TypeScript + Vite
- 后端：Node.js + Express + TypeScript
- 数据库：SQLite（用 better-sqlite3）
- 认证：JWT
功能需求：
1. 用户注册、登录
2. Todo 增删改查
3. 按完成状态筛选
4. 数据按用户隔离
分析这个需求，给我项目结构和 API 设计方案
Claude 会给出详细的目录结构和 API 端点设计。确认后，Shift+Tab 切回 Normal Mode。
Step 2：初始化项目结构（5 分钟）
按照刚才的方案初始化项目：
1. 创建 monorepo 结构（backend/ 和 frontend/ 两个目录）
2. 初始化各自的 package.json，安装依赖
3. 配置 TypeScript
4. 在 backend/ 创建基础 Express 服务器（带健康检查端点）
5. 在 frontend/ 用 Vite 创建 React 应用骨架
完成后运行两个服务，确认都能启动
Claude 会依次：
- 创建目录结构
- 生成
package.json，自动npm install - 配置
tsconfig.json - 写 Express 入口文件
- 初始化 Vite + React 项目
大约 3-5 分钟，全部自动完成。
Step 3：实现数据库和认证（8 分钟）
实现后端认证系统：
1. 创建 SQLite 数据库，建 users 和 todos 两张表
2. 实现 POST /api/auth/register（用户名+密码注册，密码用 bcrypt 哈希）
3. 实现 POST /api/auth/login（验证密码，返回 JWT）
4. 创建 JWT 中间件，用于保护后续路由
写集成测试验证注册和登录流程，跑测试确认通过
关键提示：要求写测试并运行，这让 Claude 自我验证，减少你的审查负担。
Step 4：实现 Todo API（5 分钟）
实现 Todo CRUD API（所有端点需要 JWT 认证）：
- GET /api/todos?status=all|active|completed
- POST /api/todos（创建，返回新建 Todo）
- PATCH /api/todos/:id（更新 title 或 completed）
- DELETE /api/todos/:id
确保用户只能操作自己的 Todo（数据隔离）
为每个端点写测试，运行确认通过
Step 5：实现前端（10 分钟）
实现前端功能：
1. 登录/注册页面（表单 + 错误提示）
2. 主页面：Todo 列表 + 添加 Todo 输入框
3. 每个 Todo 有：复选框（切换完成状态）、编辑、删除
4. 顶部三个筛选 Tab：全部 / 未完成 / 已完成
5. 用 axios 调用后端 API，JWT 存在 localStorage
6. 用 React Query 做状态管理
样式用 Tailwind CSS，保持简洁现代
Claude 会逐一实现每个组件，并在每步完成后在浏览器中验证。
Step 6：联调和 Bug 修复（2 分钟）
启动前后端，在浏览器里测试完整流程：
1. 注册新用户
2. 登录
3. 添加几个 Todo
4. 切换完成状态
5. 筛选测试
记录任何 Bug，修复
Claude 会自动打开 DevTools 查看网络请求，定位 CORS 问题、认证头缺失等常见问题。
实际效果对比
| 操作 | 传统方式 | Claude Code |
|---|---|---|
| 项目初始化 | 15-20 分钟（配置各种工具） | 3 分钟 |
| 数据库 + 认证 | 1-2 小时 | 10 分钟 |
| CRUD API + 测试 | 1-2 小时 | 8 分钟 |
| 前端实现 | 2-4 小时 | 15 分钟 |
| 总计 | 4-8 小时 | ~35 分钟 |
这不是"生成了一堆可能跑不起来的代码"——每个步骤都有测试验证，代码是真正能运行的。
关键经验总结
1. 任务拆分要合理
每次给 Claude 一个聚焦的任务，不要一次性要求"帮我把整个应用写完"。
2. 必须要求写测试
"写完后运行测试验证" 这句话极其重要。有了测试，Claude 自己发现和修复问题，不需要你盯着每行代码审查。
3. 先 Plan 后 Execute
复杂任务先用 --permission-mode plan 做架构设计，确认方向对了再执行，避免推倒重来。
4. 遇到问题提供完整错误
出现这个错误：[完整错误信息]
找根本原因并修复，不要只掩盖错误
5. CLAUDE.md 固化技术约定
项目开始时创建 CLAUDE.md：
markdown
# 技术栈
- 前端：React 18 + TypeScript + Vite + Tailwind
- 后端：Node.js + Express + TypeScript
- 数据库：SQLite with better-sqlite3
- 测试：Vitest
# 约定
- 所有 API 统一返回 { success, data, error } 格式
- 错误信息用中文
- 提交前运行 npm test接下来可以做什么
有了基础应用后，Claude Code 还能帮你：
# 加功能
给 Todo 加截止日期和优先级字段
# 写文档
为所有 API 端点生成 OpenAPI 文档
# 部署
帮我写 Dockerfile 和 docker-compose.yml
# 优化
分析当前代码的性能瓶颈并优化
来源：Anthropic 官方文档实战整理