自学教程

Claude Code 实战

Claude Code 教程

简介

本篇为端到端完整实战案例，采用行业推荐的Plan先行工作流，从项目初始化、封装技能、开发功能、代码评审、浏览器验证，完整演示Claude Code整套开发流程。

前置知识：前面系列教程（CLI、模式、Skills、MCP、Checkpoint、Chrome控制）

实战目标

基于Nuxt4，开发一个简易用户模块：

  1. 用户列表、查询接口
  2. 用户类型TS定义
  3. 生成单元测试
  4. 代码评审
  5. 浏览器页面验证

遵循：先方案、再快照、再编码、评审、测试、验证

步骤1：项目初始化

# 创建项目目录
mkdir nuxt-user-demo && cd nuxt-user-demo  # 启动Claude Code CLI
claude

进入交互会话，初始化项目，自动生成 CLAUDE.md

/init

/init 自动扫描项目技术栈，生成项目基础规范文档。

步骤2：封装可复用技能（一次性创建，后续反复调用）

调用内置 skill-creator 快速生成2个技能

调用技能 skill-creator，skillName=code-review，params=[files]，permission=只读，需求：读取源码文件，从类型安全、业务逻辑、性能、代码规范4个维度评审，输出markdown表格报告，不修改源码。

调用技能 skill-creator，skillName=vitest-generator，params=[sourceFile]，permission=允许写入文件，需求：读取源码，生成vitest单元测试，覆盖正常、空值、异常场景，代码风格和项目保持一致。

重载技能配置并查看：

/skill reload
/skill list

步骤3：切换Plan模式，输出开发方案（核心最佳实践）

/mode plan

下发需求：

开发用户模块：
1. 新建src/types/user.ts，定义用户TS类型
2. 新建src/service/user.ts，提供获取用户列表接口函数
3. 新建pages/users.vue，用户列表页面
列出所有需要修改/新建文件、变更内容、风险点，输出完整开发方案，不要修改任何文件。

Claude Code会输出完整方案文档：文件清单、字段定义、业务逻辑、潜在风险。
人工审核方案，按需调整，确认无误。

步骤4：创建检查点快照，切换执行模式

高风险改动前，创建检查点，方便回滚

/checkpoint create before-user-module-dev

切换回Manual模式（默认安全模式）

/mode manual

执行开发任务：

按照刚才输出的方案，实现用户模块

Manual模式：每一处文件修改，都会预览diff，等待人工批准。

步骤5：调用技能做代码评审 & 生成单元测试

调用技能 code-review，评审 @src/types/user.ts @src/service/user.ts @pages/users.vue

调用技能 vitest-generator，sourceFile=@src/service/user.ts

执行测试命令，验证代码是否正常运行

运行 vitest 测试用户模块

步骤6：Chrome浏览器前端页面验证

启用Chrome浏览器MCP，访问页面，查看渲染效果

@browser 打开 http://localhost:3000/users，截图页面，读取控制台日志，检查页面列表渲染是否正常

浏览器操作在Manual模式下同样需要人工审批。

步骤7：代码变更收尾

  1. 查看本次会话所有变更
/status
  1. 让Claude生成Git提交信息，执行git提交
将本次变更git add，生成符合项目规范的commit message并提交

步骤8：故障回滚演示（检查点）

如果代码改动出现问题，一键恢复到开发前快照

/checkpoint restore before-user-module-dev

文件会回退到创建检查点时刻。

实战进阶：技能 + 子代理组合

适合大型项目，子代理负责代码扫描，技能生成报告

调用子代理 lint-reviewer，扫描src目录，之后调用技能 code-review，合并两份报告输出markdown文档

实战常用斜杠命令汇总

/init                      # 项目初始化生成CLAUDE.md
/mode plan /mode manual    # 切换运行模式
/checkpoint create xxx     # 创建快照
/skill reload              # 重载技能
/status                    # 查看会话状态
/clear                     # 清空会话，重载全部配置

实战工作流标准模板（可复用到所有项目）

  1. 进入项目目录，claude 启动会话
  2. /init 初始化项目
  3. /mode plan 描述需求，获取完整方案
  4. 人工审核方案，调整需求
  5. /checkpoint create xxx 创建快照
  6. /mode manual 执行代码修改，逐一审阅diff
  7. 调用技能：代码评审、单元测试生成
  8. 运行测试、浏览器验证
  9. Git提交
  10. 出现问题：/checkpoint restore 回滚

实战避坑要点

  1. 必须坚持Plan先行：多文件重构，先看完整方案，再动手写代码，避免大范围错误。
  2. 高风险改动，一定先创建检查点。
  3. 所有生产代码保持Manual模式，禁止长期Auto模式。
  4. 技能、子代理、MCP配置修改后，记得执行 reload 或者 /clear。
  5. 会话太长，token占用过高，执行 /compact 压缩会话历史。

安全提示

  1. 实战中浏览器操作、shell命令、文件写入都需要人工审核。
  2. 检查点仅为临时快照，重要变更依然要Git提交。
  3. 不要在技能、记忆、CLAUDE.md中存放密钥、数据库密码。
标签：

0 条笔记