Day 9 用 Claude Code 从零搭建一个全栈应用

guozi

Claude Code 从入门到脱发 · Day 9

学了八天理论和碎片技巧，今天我们把它们串起来。

目标：用 Claude Code 从零搭建一个"待办事项" API 服务。选这个项目不是因为它简单（虽然确实不复杂），而是因为它足够典型——初始化项目、写代码、连数据库、跑测试、Git 管理，日常开发的完整链路都能覆盖到。

重点不是最终产物，而是过程中的工作方式。你会看到 Claude Code 在真实项目里是怎么协助开发的。

本文你将学到：

从零初始化项目的完整流程

如何用 Plan Mode 规划架构

如何让 Claude Code 帮你写代码、测试、提交

CLAUDE.md + Hooks + Skills 的实际配合

阅读时间：10 分钟 | 实操时间：60 分钟 | 难度：中级

━━━━━━━━━━━━━━━━━━━━

项目规划

先不急着写代码。Day 2 讲过 Plan Mode，现在正是用它的时候。

按两次

1. Shift+Tab

复制代码

进入 Plan Mode：

1. > 我要创建一个待办事项 API 服务，技术栈用 Node.js + Express + TypeScript + SQLite。
2. > 帮我做一个技术方案：
3. > - 目录结构
4. > - API 接口设计
5. > - 数据模型
6. > - 需要的依赖包

复制代码

Claude Code 会输出一份详细的技术方案，大概像这样：

1. 目录结构：
2. todo-api/
3.   src/
4.     routes/       # 路由定义
5.     services/     # 业务逻辑
6.     models/       # 数据模型
7.     middleware/   # 中间件
8.     types/        # TypeScript 类型
9.     app.ts        # Express 应用
10.     server.ts     # 启动入口
11.   tests/          # 测试文件
12.   package.json
13.   tsconfig.json
14.   CLAUDE.md
16. API 接口：
17. GET    /api/todos       # 获取所有待办
18. POST   /api/todos       # 创建待办
19. GET    /api/todos/:id   # 获取单个待办
20. PUT    /api/todos/:id   # 更新待办
21. DELETE /api/todos/:id   # 删除待办
23. 数据模型：
24. Todo {
25.   id: number
26.   title: string
27.   completed: boolean
28.   created_at: string
29.   updated_at: string
30. }

复制代码

确认方案没问题后，退出 Plan Mode，开始执行。

━━━━━━━━━━━━━━━━━━━━

第一步：初始化项目

1. > 帮我创建 todo-api 项目，按照刚才的方案初始化目录结构、
2. > package.json、tsconfig.json，安装必要的依赖

复制代码

Claude Code 会：

创建目录

生成

1. package.json

复制代码

（含 express、typescript、better-sqlite3 等依赖）

生成

1. tsconfig.json

复制代码

运行

1. npm install

复制代码

创建基础的

1. src/app.ts

复制代码

和

1. src/server.ts

复制代码

你只需要确认它的操作，整个过程两分钟完成。

━━━━━━━━━━━━━━━━━━━━

第二步：配置 CLAUDE.md

项目创建好后，第一件事不是写业务代码，而是写 CLAUDE.md。

1. > 帮我生成一个 CLAUDE.md，包含：
2. > - 项目技术栈信息
3. > - 常用命令（开发、测试、构建）
4. > - 代码风格约定（函数式、不用 any、文件不超过 200 行）
5. > - Git 提交规范（中文、conventional commits）

复制代码

Claude Code 会生成一个 CLAUDE.md。检查一下内容，确认后提交。

从现在开始，Claude Code 的所有操作都会遵守这份规范。

━━━━━━━━━━━━━━━━━━━━

第三步：TDD 写业务代码

这里我们用 TDD（测试驱动开发）的方式——先写测试，再写实现。

1. > 用 TDD 方式实现 Todo 的 CRUD 接口。
2. > 先写测试文件 tests/todos.test.ts，覆盖以下场景：
3. > - 创建待办（正常 + 标题为空的异常情况）
4. > - 获取所有待办
5. > - 获取单个待办（存在 + 不存在）
6. > - 更新待办状态
7. > - 删除待办

复制代码

Claude Code 会先创建测试文件。这时候运行测试当然会全部失败——因为还没有实现代码。

1. > 现在实现代码，让所有测试通过

复制代码

它会创建：

1. src/models/todo.ts

复制代码

—— 数据库操作

1. src/services/todo-service.ts

复制代码

—— 业务逻辑

1. src/routes/todos.ts

复制代码

—— 路由处理

更新

1. src/app.ts

复制代码

—— 注册路由

写完后自动跑测试，确认全部通过。

━━━━━━━━━━━━━━━━━━━━

第四步：加上中间件

1. > 给 API 加上：
2. > 1. 请求日志中间件（记录方法、路径、耗时）
3. > 2. 错误处理中间件（统一的错误响应格式）
4. > 3. 输入验证（创建和更新接口的 body 校验）

复制代码

Claude Code 会创建中间件文件、更新 app.ts，并补充对应的测试。

━━━━━━━━━━━━━━━━━━━━

第五步：用 Hooks 自动化

到这里你可能已经注意到：每次 Claude Code 改完文件，你都在想"格式化了没？类型检查过了没？"

配置 Hooks 一劳永逸。创建

1. .claude/settings.json

复制代码

：

1. {
2.   "permissions": {
3.     "allowedTools": [
4.       "Read", "Write", "Edit", "Glob", "Grep",
5.       "Bash(npm test)", "Bash(npm run lint)",
6.       "Bash(npx tsc --noEmit)", "Bash(git *)"
7.     ]
8.   },
9.   "hooks": {
10.     "PostToolUse": [
11.       {
12.         "matcher": "Edit|Write",
13.         "hooks": [
14.           {
15.             "type": "command",
16.             "command": "filepath="$CLAUDE_FILE_PATH"; if echo "$filepath" | grep -qE '\\.tsx?$'; then npx prettier --write "$filepath" 2>/dev/null && npx tsc --noEmit 2>&1 | head -10; fi"
17.           }
18.         ]
19.       }
20.     ]
21.   }
22. }

复制代码

从现在开始，每次编辑 TypeScript 文件后自动格式化 + 类型检查。

━━━━━━━━━━━━━━━━━━━━

第六步：阶段性提交

1. > 帮我提交当前的改动，这是初始版本的 CRUD API 实现

复制代码

Claude Code 会：

1. git status

复制代码

查看改动

1. git diff

复制代码

分析改了什么

生成 commit message：

1. feat(api): 实现待办事项 CRUD 接口

复制代码

等你确认后提交

━━━━━━━━━━━━━━━━━━━━

第七步：加点功能

项目雏形有了，加点进阶功能：

1. > 给待办事项加上"优先级"字段（low/medium/high），
2. > 支持按优先级筛选和排序。
3. > 需要：更新数据模型、更新接口、补充测试

复制代码

Claude Code 会修改多个文件，一气呵成：

更新 model 添加 priority 字段

更新 service 支持筛选和排序

更新路由支持 query 参数

更新测试覆盖新场景

━━━━━━━━━━━━━━━━━━━━

工作流回顾

回头看整个过程：

1. Plan Mode 规划
2.     |
3. 初始化项目
4.     |
5. 配置 CLAUDE.md（立规矩）
6.     |
7. TDD 写代码（先测试后实现）
8.     |
9. 配置 Hooks（自动化检查）
10.     |
11. 阶段性提交
12.     |
13. 迭代新功能
14.     |
15. 再次提交

复制代码

这就是用 Claude Code 开发项目的标准流程。不是让 AI 一口气写完所有代码，而是像带一个高效的搭档一样，分步骤、有节奏地推进。

━━━━━━━━━━━━━━━━━━━━

踩坑记录

实战过程中你大概率会遇到这些问题：

1. Claude Code 改着改着跑偏了

如果你觉得它走错了方向，按

1. Esc

复制代码

中断，说清楚你要什么。不要让它在错误的方向上越走越远。

2. 上下文太长导致它"忘记"了之前的规划

大型任务做到一半，

1. /clear

复制代码

清一下上下文，重新告诉它当前进度和接下来要做什么。

3. 测试没跑过就提交了

这就是 Day 5 讲的 Hooks 要解决的问题。配置一个 PreToolUse Hook，在

1. git commit

复制代码

前自动跑测试。

4. 生成的代码风格不一致

回去检查 CLAUDE.md 是不是写得够具体。"代码风格好"不如"使用 const 箭头函数定义组件，不使用 function 声明"来得有效。

━━━━━━━━━━━━━━━━━━━━

常见问题 Q&A

Q1：Claude Code 能从零创建完整的生产项目吗？

能创建功能完整的原型，但距离"生产就绪"还有距离。生产项目需要的错误处理细节、边界场景覆盖、性能优化，仍然需要人工把关。把它当搭档而不是替代品。

Q2：大型项目怎么用 Claude Code？

分模块。不要说"帮我写一个电商系统"，而是"帮我写用户注册模块"、"帮我写购物车模块"。每个模块独立开发、独立测试。

Q3：不同技术栈都能用吗？

Claude Code 对 JavaScript/TypeScript 生态支持最好，Python 次之，Java/Go/Rust 也能用。核心能力（读代码、改代码、跑命令）不受技术栈限制。

━━━━━━━━━━━━━━━━━━━━

小结

今天用 Claude Code 从零搭建了一个完整的 API 项目，核心流程：

Plan Mode 先规划，确认方案后再动手

CLAUDE.md 先配好，让 AI 遵守你的规矩

TDD 方式开发，先写测试再写实现

Hooks 自动化检查，减少手动操作

分步提交，保持版本控制清晰

明天是系列最后一篇——高级技巧和省钱指南。十天学完，你的 Claude Code 使用水平会从"能用"变成"好用"。

当然，发际线的事......我管不了。

明天见。

━━━━━━━━━━━━━━━━━━━━

系列进度：9/10