Stone's Blog

blog.tao-studio.net

0%

从头学 Claude Code（八）第一次装修——添加新功能实战

发表于 分类于 ， ， ，
本文字数： 2.3k 阅读时长 ≈ 2 分钟
添加新功能就像装修房子：先画图纸再开工（项目背景 + 功能需求 + 验收标准），然后按 4A 流程执行：Analyze（了解房子现状）→ Architect（设计装修方案）→ Apply（开始施工）→ Assert（验收交房）。

从头学 Claude Code（八）—— 第一次装修：添加新功能实战

本系列适合零基础新手，手把手带你掌握 AI 编程助手

上节回顾

上一讲我们学会了用 Claude Code 修 Bug，相当于”修车”。这一讲，我们来学添加新功能，就像”装修房子”。

1. 案例背景：房子要装修

场景：你的 Vue 项目就像一套毛坯房，现在要添加一个用户资料页面——就像要装修出一个新的房间。

功能需求： - 显示用户头像、昵称、邮箱 - 支持修改昵称 - 支持上传头像

2. 任务准备：先画图纸再开工

在让 Claude 开始之前，你需要先准备好装修图纸：

准备一：项目情况——这是什么样的房子

1
2
3
4
5
6
7
## 背景
- 项目：Vue 3 + Pinia + Element Plus
- 目录：src/
- 现有页面：Login.vue、Home.vue、UserList.vue

## 任务
添加用户资料页面

就像告诉装修队：“我们这是个三室一厅的房子，现在要加一个书房”

准备二：功能需求——要什么样的装修

1
2
3
4
5
6
7
8
9
## 功能需求
1. 显示用户信息（头像、昵称、邮箱）
2. 修改昵称功能
3. 上传头像功能

## 约束
- 使用 Element Plus 组件（用现成的家具）
- 遵循现有代码风格（和家里其他地方风格一致）
- 不要动其他房间（不要修改其他页面）

就像说：“书房要有书柜、书桌、椅子，用宜家的家具，颜色要和客厅搭，别把厨房给改了”

准备三：验收标准——怎么算装好了

1
2
3
4
5
## 验收
1. 页面能正常显示用户信息
2. 修改昵称后更新显示
3. 上传头像后预览更新
4. 与现有页面风格一致

就像说：“装好了我要检查：门能开关、灯能亮、甲醛不超标”

3. 完整流程（4A）：装修四部曲

阶段一：Analyze - 了解房子现状

你可以说： 

1
先帮我分析一下现有项目的结构和代码风格

Claude 会： - 画出项目地图（目录结构） - 分析现有房间格局（组件写法） - 识别可复用的家具（可复用模式）

就像装修队先来看看：“户型是这样，承重墙在这些位置，水电怎么走的”

阶段二：Architect - 设计装修方案

你可以说： 

1
根据分析结果，设计用户资料页面的实现方案

Claude 会提供： - 房间布局图（组件结构设计） - 水电走法（API 接口设计） - 材料清单（数据流设计）

就像设计师拿出图纸：“这边放书桌，这边放书柜，走道这样设计…”

阶段三：Apply - 开始施工

你可以说： 

1
请按方案实现这个功能

Claude 会： 1. 创建 Profile.vue（盖房间） 2. 添加必要的 API 调用（接水电） 3. 更新路由配置（开门窗）

就像装修队开始干活：砌墙、铺地板、安装水电…

阶段四：Assert - 验收交房

你可以说： 

1
验证一下实现是否符合要求

Claude 会： - 检查工程质量（代码完整性） - 试试能不能住人（运行测试） - 对照验收标准（确认功能可用）

就像你说”我来看看”，装修队说：“你检查一下，看有没有问题”

4. 分步对话示例：装修全过程

对话 1：了解房子

1
你：我想添加一个用户资料页面，先帮我看看现有项目的结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Claude：
项目结构：
src/
├── components/     # 公共家具（公共组件）
├── views/         # 各个房间（页面组件）
│   ├── Login.vue    # 客厅
│   ├── Home.vue     # 厨房
│   └── UserList.vue # 卧室
├── api/            # 电器开关（API 接口）
├── stores/         # 仓库（Pinia 状态）
└── router/         # 门窗（路由配置）

现有页面使用 Composition API + <script setup>
（都是北欧简约风）

就像装修队说：“我看了，你的房子是三室一厅，客厅比较大，厨房有天然气”

对话 2：确认方案

1
你：好的，请设计用户资料页面的实现方案
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Claude：
方案设计：

1. 创建 src/views/Profile.vue（盖新房间）
2. 使用现有的 user API 获取/更新用户信息（用现有的水电接口）
3. 路由添加 /profile 路径（开一个新门窗）

页面结构：
- 头像上传区（进门衣帽间）
- 信息展示/编辑区（客厅）
- 保存按钮（厨房的灶台）

需要创建的文件：
- src/views/Profile.vue

预计工时：2小时

就像设计师说：“我的方案是这样的：书房放这里，门开在这里，用原来的水电…”

对话 3：开始施工

1
你：方案确认，请开始实现
1
2
3
4
5
6
7
8
Claude（施工完成）：
已创建 Profile.vue，包含：
- 头像上传（el-upload）—— 衣帽间搞定
- 昵称编辑（el-input）—— 客厅搞定
- 邮箱显示（el-text）—— 餐厅搞定
- 保存功能—— 厨房搞定

已更新路由配置：门窗已开好

就像装修队说：“好了，房间盖好了，你来看看”

5. 添加功能的关键要点

要点一：先分析再动手

1
先了解现有代码结构，不要假设

就像装修前要先看户型图，别一上来就砸墙

要点二：设计先行

1
复杂功能先设计再实现，避免返工

就像盖房子要先画图纸，否则容易盖歪

要点三：分步确认

1
大功能拆成小步骤，每步确认

就像装修一个房间一个房间来，别一次性全砸了

要点四：验收标准清晰

1
提前说明什么是"完成"

就像签合同前先说清楚：什么时候交房、验什么

本节小结

  • 准备阶段：项目背景 + 功能需求 + 验收标准（画好图纸再开工）
  • 4A 流程：了解房子 → 设计方案 → 施工 → 验收
  • 关键要点：先分析、设计、分步确认、清晰验收

💡 记住：添加功能就像装修——先规划，再施工，最后验收！

下节预告

下一讲：学习如何用 Claude Code 进行代码审查——就像请了个”监理”

有问题？评论区见！如果觉得有帮助，点个赞再走~

标签: #Claude Code #AI编程 #新功能开发 #实战教程