Claude Code 实战指南
场景驱动 | 快速上手 | 开箱即用
文档定位
本文档是 场景驱动的实战指南,与其他文档的关系:
- ClaudeCode.md: 模板库,提供 34 个通用提示词模板
- 实战指南.md (本文档): 场景手册,提供具体场景的完整解决方案
- 关系: 模板库提供原子能力,实战指南组合模板解决实际问题
何时使用本文档:
- 为 VitePress 文档站点添加新内容
- 执行多步骤的文档处理流程
- 需要完整工作流程指导的场景
何时使用 ClaudeCode.md:
- 单次操作 (查询代码、改变量名等)
- 需要查找特定语法模板
- 需要了解工具基础用法
快速开始
5 分钟上手
场景导航
根据你的需求,选择对应场景:
┌─────────────────────────────────────────┐
│ 文档项目专属场景 │
├─────────────────────────────────────────┤
│ 📝 添加新的函数文档 │
│ → 场景 1: 单个函数文档添加 │
│ │
│ 📚 批量生成文档 │
│ → 场景 2: 批量函数文档生成 │
│ │
│ 🔧 优化现有文档格式 │
│ → 场景 3: 文档格式标准化 │
│ │
│ 🗂️ 配置导航和侧边栏 │
│ → 场景 4: 导航配置优化 │
│ │
│ 🎨 自定义主题和组件 │
│ → 场景 5: 主题定制 │
│ │
│ 🐛 修复构建错误 │
│ → 工作流 3: Bug 修复流程 │
│ │
│ ⚡ 性能优化 │
│ → 工作流 6: 性能优化流程 │
└─────────────────────────────────────────┘第一部分: 文档项目专属场景
场景 1: 添加单个函数文档
需求: 为 PostgreSQL 或其他数据库添加一个函数的文档页面
复杂度: 🟢 简单 (2-3 轮)
完整流程:
第 1 轮: 确认文档格式
我需要为 PostgreSQL 函数 [函数名] 添加文档页面
请先查看现有函数文档格式:
@docs/database/postgreSQL/ref/ascii.md
分析并复述文档格式规范,包括:
1. frontmatter 结构
2. 标题层级
3. 内容组织方式
4. 示例格式
不要写代码AI 会输出: 文档格式规范的详细说明
第 2 轮: 提供函数信息并生成
理解正确,现在根据以下信息生成文档
【函数信息】
- 函数名: [函数名]
- 功能描述: [描述]
- 语法: [语法]
- 参数说明: [参数]
- 返回值: [返回值类型和说明]
- 示例:
```sql
[SQL 示例]【文档路径】 创建文件: docs/database/postgreSQL/ref/[函数名].md
【要求】
- 严格遵循 @docs/database/postgreSQL/ref/ascii.md 的格式
- 使用中文撰写
- 示例要实用且易懂
开始生成
---
#### 第 3 轮: 更新侧边栏配置
```bash
文档生成完成,现在更新侧边栏配置
@docs/.vitepress/sidebar.ts
在 PostgreSQL 函数参考部分添加新文档的链接
要求:
- 按字母顺序或分类插入
- 保持现有格式
- 检查是否有重复项
直接修改总结: 3 轮完成单个函数文档添加,包含生成文档和配置更新
场景 2: 批量生成函数文档
需求: 一次性为多个函数生成文档
复杂度: 🟡 中等 (4-6 轮)
完整流程:
第 1 轮: 准备函数清单
我需要批量生成 PostgreSQL 函数文档
请先读取现有文档格式:
@docs/database/postgreSQL/ref/ascii.md
然后制定批量生成方案,不要写代码
【函数清单】
准备以 CSV 或 JSON 格式提供函数信息,包含:
- 函数名
- 功能描述
- 语法
- 示例
请建议最佳的数据组织格式第 2 轮: 提供数据并开始生成
采用建议的格式,这是函数数据:
[粘贴 JSON 或 CSV 数据]
要求:
- 为每个函数生成独立的 .md 文件
- 文件命名: 函数名小写.md
- 保存路径: docs/database/postgreSQL/ref/
- 每生成 5 个暂停一次,让我确认
开始第一批 (1-5)第 3-5 轮: 分批生成
第一批正确,继续第二批 (6-10)(重复直到完成所有函数)
第 6 轮: 批量更新侧边栏
所有文档生成完成
现在更新 @docs/.vitepress/sidebar.ts
批量添加以下函数文档链接:
[函数名列表]
要求:
- 按分类或字母顺序插入
- 保持一致的缩进和格式
直接修改总结: 通过分批生成和统一配置更新,高效完成批量文档创建
场景 3: 文档格式标准化
需求: 将不规范的文档统一为标准格式
复杂度: 🟡 中等 (4-5 轮)
完整流程:
第 1 轮: 分析现有文档
@docs/database/postgreSQL/ref/ascii.md 是标准格式
@docs/[待优化文档路径]
请对比这两个文档,列出不符合标准的地方,不要写代码
【对比维度】
1. frontmatter 是否完整
2. 标题层级是否正确
3. 代码块是否有语言标识
4. 示例格式是否统一
5. 空行和缩进是否规范第 2 轮: 制定优化方案
理解问题,请给出详细的优化方案,不要写代码
包括:
1. 需要修改的具体位置
2. 修改前后对比
3. 是否需要补充内容第 3 轮: 执行优化
采用方案,开始优化
@docs/[待优化文档路径]
要求:
- 严格遵循标准格式
- 保留原有内容,仅调整格式
- 补充缺失的 frontmatter
直接修改第 4 轮: 批量优化 (如需要)
第一个文档优化完成
现在按相同标准优化以下文档:
@docs/[文档 1]
@docs/[文档 2]
@docs/[文档 3]
每个文档优化完成后暂停总结: 通过标准对比和逐步优化,确保文档格式一致性
场景 4: 导航和侧边栏配置优化
需求: 重新组织导航结构或侧边栏分类
复杂度: 🟡 中等 (3-4 轮)
完整流程:
第 1 轮: 分析现有结构
@docs/.vitepress/nav.ts
@docs/.vitepress/sidebar.ts
分析当前导航和侧边栏结构,不要写代码
【分析内容】
1. 当前的分类逻辑
2. 各分类下的内容数量
3. 是否有分类不合理的地方
4. 是否有遗漏的文档
请给出结构优化建议第 2 轮: 设计新结构
采用建议 [X],请详细设计新的导航结构,不要写代码
包括:
1. 顶层导航分类
2. 每个分类下的子项
3. 侧边栏的嵌套层级
4. 迁移影响评估第 3 轮: 实施配置更新
确认方案,开始更新配置
先更新 @docs/.vitepress/nav.ts
按照新设计调整导航结构
完成后暂停第 4 轮: 更新侧边栏
导航更新正确
现在更新 @docs/.vitepress/sidebar.ts
按照新分类组织侧边栏
要求:
- 保持路径正确
- 保持层级清晰
- 添加必要的注释
直接修改总结: 通过分析-设计-实施的流程,系统性优化导航结构
场景 5: VitePress 主题定制
需求: 自定义主题样式或组件
复杂度: 🔴 复杂 (6-8 轮)
完整流程:
第 1 轮: 理解现有主题
@docs/.vitepress/theme/index.ts
@docs/.vitepress/theme/style.css
分析当前主题配置,不要写代码
【分析内容】
1. 使用的基础主题
2. 已注册的自定义组件
3. 已应用的插件
4. 自定义样式范围第 2 轮: 需求讨论
我需要实现以下定制,请讨论实施方案,不要写代码
【定制需求】
[具体描述,例如:]
- 添加自定义页面布局
- 修改主题色
- 添加全局组件
- 集成第三方插件
【技术约束】
- 不破坏现有功能
- 保持 VitePress 升级兼容性
- 性能影响最小化
请给出 2-3 个方案对比第 3 轮: 方案确认
采用方案 [X],请详细说明实施步骤,不要写代码
包括:
1. 需要创建的文件
2. 需要修改的配置
3. 依赖安装 (如有)
4. 实施顺序第 4-7 轮: 分步实施
# 第 4 轮
开始第一步: [步骤描述]
完成后暂停
# 第 5 轮
第一步正确,继续第二步
...
# (根据复杂度调整轮数)第 8 轮: 测试验证
所有步骤完成
请列出测试要点:
1. 需要检查的页面
2. 需要测试的功能
3. 浏览器兼容性检查
4. 性能影响评估
输出测试清单,不要写代码总结: 复杂定制需要充分的方案讨论和分步实施
第二部分: 通用工作流程
工作流 1: 新功能开发
适用场景: 从 0 到 1 开发新的文档模块或功能
预计轮数: 8-10 轮
流程图:
需求分析(1) → 方案设计(2-3) → 需求确认(4)
→ 任务规划(5) → 分步实施(6-8) → 验证测试(9) → 文档更新(10)阶段 1: 需求分析 (第 1 轮)
/clear
讨论需求,不要写代码
【需求背景】
[业务背景描述]
【功能目标】
[要实现的核心功能]
【技术要求】
- [技术约束 1]
- [技术约束 2]
【相关文件】
@[相关配置文件 1]
@[相关配置文件 2]
请分析:
1. 现有架构是否支持该需求
2. 需要新增哪些文件/配置
3. 可能的技术难点
4. 是否有类似功能可参考阶段 2: 方案设计 (第 2-3 轮)
第 2 轮: 方案对比
基于以上分析,请提供 2-3 个设计方案,不要写代码
对比维度:
- 实施复杂度
- 维护成本
- 扩展性
- 对现有系统的影响第 3 轮: 详细设计
采用方案 [X],请详细说明实施步骤,不要写代码
包括:
1. 文件和目录结构
2. 配置变更
3. 依赖安装
4. 关键实现细节
5. 潜在风险点阶段 3: 需求确认 (第 4 轮)
请复述以下内容,确认理解一致,不要写代码:
1. 文件和目录设计
2. 配置项说明
3. 核心功能流程
4. 边界条件处理
5. 兼容性策略阶段 4: 任务规划 (第 5 轮)
制定详细的 todo 清单,按优先级排序,不要写代码
要求:
- 每个 todo 是独立可测试的最小单元
- 标注依赖关系
- 标注风险点
- 预估每个步骤的工作量阶段 5: 分步实施 (第 6-8 轮)
# 第 6 轮
采用方案 [X],开始编码
【实施顺序】
1. 先创建基础文件和目录
2. 再配置必要的设置
3. 最后实现核心功能
每完成一步暂停,等我确认后继续
# 第 7-8 轮
ok,继续下一步阶段 6: 验证测试 (第 9 轮)
功能实施完成,请列出测试要点:
【功能测试】
- [测试点 1]
- [测试点 2]
【边界测试】
- [边界情况 1]
- [边界情况 2]
【兼容性测试】
- 浏览器兼容性
- 旧版本数据兼容性
输出测试清单,不要写代码阶段 7: 文档更新 (第 10 轮)
测试通过,请更新相关文档:
1. 更新 README.md (如有新的依赖或配置)
2. 更新 CLAUDE.md (如有新的规范)
3. 生成使用说明 (如需要)
直接修改工作流 2: 代码重构
适用场景: 改造现有文档或配置,提升质量
预计轮数: 5-8 轮
流程图:
现状分析(1) → 参考学习(2) → 重构方案(3) → 分步实施(4-7) → 验证(8)第 1 轮: 现状分析
@[待重构文件]
分析当前代码/配置的问题,不要写代码
【分析维度】
1. 结构是否清晰
2. 是否有重复代码
3. 是否符合最佳实践
4. 可维护性评估
5. 性能问题 (如适用)第 2 轮: 参考学习
@[参考文件]
学习参考文件的优秀实践
请提取:
1. 代码组织方式
2. 命名规范
3. 注释风格
4. 可复用的模式
整理后说明如何应用到重构中,不要写代码第 3 轮: 重构方案
基于分析和参考,制定重构方案,不要写代码
【重构内容】
1. 结构调整
2. 代码提取和复用
3. 命名优化
4. 注释补充
【约束条件】
- 不改变功能行为
- 保持向后兼容
- 分步实施,每步可验证
请给出详细的分步方案第 4-7 轮: 逐步实施
# 第 4 轮
采用方案,开始重构
先进行第一步: [步骤描述]
完成后暂停
# 第 5-7 轮
第一步正确,继续第二步
...第 8 轮: 验证
重构完成,请验证:
1. 功能是否正常
2. 是否引入新问题
3. 是否达到重构目标
输出验证清单,不要写代码工作流 3: Bug 修复
适用场景: 快速定位和修复问题
预计轮数: 5 轮
流程图:
问题复现(1) → 根因分析(2) → 修复方案(3) → 实施修复(4) → 验证(5)第 1 轮: 问题复现
遇到以下问题,请帮助定位
【问题描述】
[详细描述现象]
【复现步骤】
1. [步骤 1]
2. [步骤 2]
【预期行为】
[应该是什么]
【实际行为】
[实际是什么]
【相关文件】
@[可能相关的文件 1]
@[可能相关的文件 2]
请先理解问题,不要写代码第 2 轮: 根因分析
基于代码分析根本原因,不要写代码
【分析内容】
1. 问题出现的具体位置
2. 为什么会出现这个问题
3. 是否有其他潜在影响
4. 是否是设计缺陷第 3 轮: 修复方案
请给出修复方案,不要写代码
【方案要求】
1. 最小化改动
2. 不引入新问题
3. 考虑边界情况
4. 是否需要补充测试
如有多个方案,请对比说明第 4 轮: 实施修复
采用方案 [X],开始修复
@[文件路径]#[行号]
[具体修复指令]
直接修改第 5 轮: 验证测试
修复完成,请列出验证要点:
【功能验证】
- 原问题是否解决
- 复现步骤是否正常
【回归验证】
- 相关功能是否受影响
- 边界情况是否正常
【建议测试用例】
[补充测试用例建议]
输出验证清单,不要写代码工作流 4: 文档站点配置变更
适用场景: 修改 VitePress 配置、插件、主题等
预计轮数: 4 轮
流程图:
需求分析(1) → 配置方案(2) → 实施变更(3) → 测试验证(4)第 1 轮: 需求分析
需要对文档站点进行配置变更
【变更需求】
[描述需要修改的配置]
【当前配置】
@docs/.vitepress/config.ts
请分析:
1. 需要修改哪些配置项
2. 是否需要安装新依赖
3. 变更的影响范围
4. 是否有风险
不要写代码第 2 轮: 配置方案
基于分析,请给出配置方案,不要写代码
【方案内容】
1. 具体的配置修改
2. 依赖安装命令 (如需要)
3. 配置项说明
4. 注意事项第 3 轮: 实施变更
采用方案,开始配置变更
先安装依赖 (如需要)
然后修改配置文件
@docs/.vitepress/config.ts
[具体配置修改指令]
直接修改第 4 轮: 测试验证
配置变更完成
请列出验证步骤:
1. 开发服务器启动测试
2. 构建测试
3. 功能验证要点
4. 性能影响检查
输出测试清单,不要写代码工作流 5: 内容迁移
适用场景: 从其他文档系统迁移到 VitePress
预计轮数: 6-8 轮
流程图:
源分析(1) → 迁移方案(2) → 格式转换(3-5) → 配置更新(6) → 验证(7-8)第 1 轮: 源分析
需要将文档从 [源系统] 迁移到 VitePress
【源文档信息】
- 文档数量: [数量]
- 文档格式: [Markdown/其他]
- 目录结构: [描述]
- 特殊语法: [如有]
【示例文档】
[粘贴或引用示例]
请分析:
1. 源格式与 VitePress 的差异
2. 需要转换的内容类型
3. 迁移难点
4. 建议的迁移策略
不要写代码第 2 轮: 迁移方案
基于分析,制定迁移方案,不要写代码
【方案内容】
1. 目录结构映射
2. 格式转换规则
3. 特殊语法处理
4. 配置生成策略
5. 分批迁移计划
请详细说明每个环节第 3-5 轮: 格式转换
# 第 3 轮
采用方案,开始迁移
第一批: [文档范围]
要求:
- 转换为 VitePress Markdown 格式
- 添加必要的 frontmatter
- 保持目录结构
- 每批完成后暂停
开始第一批
# 第 4-5 轮
第一批正确,继续第二批
...第 6 轮: 配置更新
所有文档迁移完成
现在更新导航和侧边栏配置:
@docs/.vitepress/nav.ts
@docs/.vitepress/sidebar.ts
根据迁移后的目录结构生成配置
直接修改第 7-8 轮: 验证
# 第 7 轮
配置更新完成
请列出验证要点:
1. 所有页面是否可访问
2. 导航和侧边栏是否正确
3. 链接是否有效
4. 格式是否正常
输出验证清单,不要写代码
# 第 8 轮
测试发现以下问题:
[问题描述]
请修复工作流 6: 性能优化
适用场景: 优化文档站点的构建和访问性能
预计轮数: 4 轮
流程图:
性能分析(1) → 优化方案(2) → 实施优化(3) → 效果验证(4)第 1 轮: 性能分析
文档站点存在性能问题
【问题描述】
[构建慢/加载慢/其他]
【当前配置】
@docs/.vitepress/config.ts
@package.json
请分析可能的性能瓶颈:
1. 构建配置
2. 文档数量和大小
3. 插件和依赖
4. 资源加载
不要写代码第 2 轮: 优化方案
基于分析,制定优化方案,不要写代码
【优化内容】
1. 配置优化
2. 依赖优化
3. 资源优化
4. 构建优化
【预期效果】
[具体的性能提升目标]
请详细说明每项优化的方法第 3 轮: 实施优化
采用方案,开始优化
按以下顺序实施:
1. [优化项 1]
2. [优化项 2]
3. [优化项 3]
每完成一项暂停,验证效果后继续第 4 轮: 效果验证
所有优化完成
请列出性能对比测试方法:
1. 构建时间对比
2. 页面加载速度对比
3. 资源大小对比
4. 其他性能指标
输出测试指南,不要写代码第三部分: 最佳实践
1. 上下文管理
何时清空上下文
应该清空的场景:
- 切换到完全不同的任务
- 对话超过 50 轮
- AI 开始混淆上下文
不应该清空的场景:
- 任务进行中
- 仅切换文件
- 对结果不满意 (应纠正而非清空)
清空后快速恢复
/clear
继续 [任务名称]
【上次进度】
- 已完成: [步骤 1], [步骤 2]
- 当前: [当前步骤]
- 关键决策: [重要决策]
请先复述关键决策,然后继续2. 多文件协作
精确引用
@docs/.vitepress/config.ts
@docs/.vitepress/sidebar.ts
分析配置文件的关联关系,不要写代码注意:
- 一次不超过 5 个文件
- 大文件加行号限制
- 路径必须准确
3. 文档格式规范
统一格式检查清单
- [ ] frontmatter 完整 (layout, title 等)
- [ ] 标题层级正确 (h1 唯一, h2-h4 嵌套)
- [ ] 代码块有语言标识
- [ ] 空行符合规范 (代码块前后有空行)
- [ ] 链接有效
- [ ] 中文和英文/数字之间有空格4. 分批处理策略
适用场景: 批量生成或修改文档
策略:
# 第一批
生成/修改以下 5 个文档:
[列表]
每完成一个暂停让我确认
# 确认无误后
ok,继续下一批好处:
- 及时发现问题
- 避免批量错误
- 控制生成节奏
5. 配置变更安全策略
变更前检查
@docs/.vitepress/config.ts
在修改配置前,请先:
1. 备份当前配置 (说明如何备份)
2. 列出变更影响
3. 说明回滚方法
不要写代码变更后验证
配置修改完成
执行以下验证:
1. npm run docs:dev (检查开发服务器)
2. npm run docs:build (检查构建)
3. 检查关键页面
4. 检查控制台错误
如有错误,提供修复建议第四部分: 常见问题
Q1: 如何快速添加一批相似的文档?
回答: 使用场景 2 (批量生成函数文档)
关键点:
- 准备结构化数据 (JSON/CSV)
- 分批生成 (每批 5-10 个)
- 统一更新配置
Q2: 文档格式不一致怎么办?
回答: 使用场景 3 (文档格式标准化)
步骤:
- 确定标准格式参考
- 对比并列出差异
- 逐个或批量修复
Q3: 如何重新组织文档结构?
回答: 使用场景 4 (导航配置优化)
注意:
- 先分析后设计
- 更新导航和侧边栏
- 检查链接有效性
Q4: VitePress 配置修改失败怎么办?
回答: 使用工作流 4 (配置变更)
调试方法:
- 检查配置语法
- 检查依赖安装
- 查看控制台错误
- 参考官方文档
Q5: 如何提升构建和访问速度?
回答: 使用工作流 6 (性能优化)
常见优化:
- 减少不必要的插件
- 优化图片资源
- 使用构建缓存
- 启用代码分割
第五部分: 附录
常用命令速查
# 开发服务器
npm run docs:dev
npm run dev:vite
# 构建
npm run docs:build
# 预览构建结果
npm run docs:preview
# 依赖安装
npm install [package-name]文件路径速查
| 类型 | 路径 |
|---|---|
| 配置文件 | docs/.vitepress/config.ts |
| 导航配置 | docs/.vitepress/nav.ts |
| 侧边栏配置 | docs/.vitepress/sidebar.ts |
| 主题配置 | docs/.vitepress/theme/index.ts |
| 自定义样式 | docs/.vitepress/theme/style.css |
| PostgreSQL 文档 | docs/database/postgreSQL/ref/*.md |
| CSS 文档 | docs/vue/css/attr/*.md |
| TypeScript 文档 | docs/vue/typescript/*.md |
| AI 文档 | docs/AI/*.md |
检查清单模板
文档添加检查清单
- [ ] 文档内容完整
- [ ] 格式符合规范
- [ ] frontmatter 正确
- [ ] 代码示例有效
- [ ] 侧边栏已更新
- [ ] 链接有效
- [ ] 本地预览正常配置变更检查清单
- [ ] 配置语法正确
- [ ] 依赖已安装
- [ ] 开发服务器正常
- [ ] 构建成功
- [ ] 功能验证通过
- [ ] 无控制台错误
- [ ] 性能无明显下降使用建议
新手入门
- 阅读"快速开始"部分
- 跟随场景 1 实践
- 熟悉基本流程
日常使用
- 根据需求查找对应场景
- 跟随流程逐步操作
- 灵活调整细节
复杂任务
- 使用通用工作流程
- 充分讨论方案
- 分步实施验证
遇到问题
- 查阅常见问题部分
- 参考最佳实践
- 必要时使用 ClaudeCode.md 中的基础模板
版本: v1.0 最后更新: 2025-10-22 适用: VitePress 文档项目
