Claude Codde 入门教程—— 从零到独立完成项目

Claude Code 入门教程

适合人群：技术小白、编程初学者、对 AI 编程感兴趣的所有人
学习目标：读完本文后，你能够独立使用 Claude Code 完成一个完整的 OCP 项目
阅读时间：约 45-60 分钟
难度等级：★☆☆☆☆（零基础友好）

目录

1. 前言：你即将拥有的"超能力"
2. 什么是 Claude Code？—— 你的 AI 编程伙伴
3. 安装 Claude Code —— 3 步搞定
4. 第一次对话 —— 跟 AI 说"你好"
5. 核心概念：理解 Claude Code 的"大脑"
6. 基础操作：读、写、改、搜
7. 实战演练一：用 Claude Code 写一个网页
8. 实战演练二：管理一个完整项目
9. 高级功能：让 Claude Code 更强大
10. OCP 项目实战指南
11. 常见问题与排错指南
12. 总结与下一步

1. 前言：你即将拥有的"超能力"

1.1 先讲一个故事

想象一下，你刚进入一家新公司，被分配了一个任务：在两周内完成一个 OCP 项目。

你打开项目文档，看到一堆陌生的技术名词：Java、Maven、Spring Boot、REST API、数据库、Docker……你感到头皮发麻，不知从何下手。

这时候，如果有人告诉你：

“你旁边坐着一个经验丰富的资深程序员，他精通所有编程语言，24 小时待命，永远不会不耐烦，而且你只需用中文跟他聊天，他就能帮你写代码、修 Bug、部署项目。”

你会不会觉得这是天方夜谭？

这，就是 Claude Code。

1.2 Claude Code 是什么（用一句话说清楚）

Claude Code 是一个运行在终端里的 AI 编程助手。 你用自然语言（中文、英文都行）告诉它你想做什么，它就能帮你完成。

打个比方：

1.3 学完本教程你能做什么

学完本教程后，你将能够：

• ✅ 独立安装和配置 Claude Code
• ✅ 用自然语言让 AI 帮你写代码
• ✅ 读懂、修改、管理一个完整的软件项目
• ✅ 使用 Claude Code 的高级功能（MCP、Skills、Workflows）
• ✅ 独立完成一个 OCP 项目（从零到部署上线）

1.4 本教程的阅读方式

1如果你是纯小白 ──→ 从头到尾按顺序阅读，每个练习都跟着做
2如果你有点基础 ──→ 可以跳过第 3 章，从第 5 章开始
3如果你想快速上手 ──→ 直接看第 7 章和第 10 章
4

2. 什么是 Claude Code？—— 你的 AI 编程伙伴

2.1 用最通俗的话解释

把 Claude Code 想象成一个住在你电脑终端里的智能助手：

1┌─────────────────────────────────────────────────────────┐
2│                    你（人类）                             │
3│   "帮我写一个计算器程序"                                  │
4│   "这段代码为什么报错？"                                  │
5│   "把我的项目打包部署"                                    │
6└─────────────────────┬───────────────────────────────────┘
7                      │
8                      │ 你只需要用中文说话
9                      ▼
10┌─────────────────────────────────────────────────────────┐
11│                 Claude Code（AI 助手）                    │
12│                                                         │
13│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐  │
14│  │ 理解你的需求  │  │ 读取项目文件  │  │ 执行命令     │  │
15│  │              │  │              │  │              │  │
16│  │ "他想做计算器"│  │ "我来看看    │  │ "mvn compile"│  │
17│  │ "需要加减乘除"│  │  现有代码"   │  │  编译项目    │  │
18│  └──────┬───────┘  └──────┬───────┘  └──────┬───────┘  │
19│         │                 │                 │           │
20│         └─────────────────┼─────────────────┘           │
21│                           │                             │
22│                           ▼                             │
23│              ┌──────────────────────┐                   │
24│              │  生成代码 / 修复 Bug  │                   │
25│              │  运行测试 / 部署项目  │                   │
26│              └──────────────────────┘                   │
27└─────────────────────────────────────────────────────────┘
28

2.2 Claude Code 与 ChatGPT 有什么不同？

很多人会问：“我已经有 ChatGPT 了，为什么还要用 Claude Code？”

这是两个完全不同的工具：

简单来说：ChatGPT 是你的"老师"，Claude Code 是你的"同事"。

2.3 Claude Code 的核心能力一览

1Claude Code 的能力全景图
2═══════════════════════════════════════════════════════════
3
4  🔍 读取与搜索               ✏️ 编写与修改
5  ┌─────────────────┐       ┌─────────────────┐
6  │ • 读取任何文件    │       │ • 创建新文件     │
7  │ • 搜索代码内容    │       │ • 精确修改代码   │
8  │ • 文件模式匹配    │       │ • 批量替换内容   │
9  │ • 理解项目结构    │       │ • 重构整个项目   │
10  └─────────────────┘       └─────────────────┘
11
12  ⚡ 执行与运行               🧠 思考与规划
13  ┌─────────────────┐       ┌─────────────────┐
14  │ • 运行终端命令    │       │ • 分析需求      │
15  │ • 编译项目       │       │ • 设计方案      │
16  │ • 运行测试       │       │ • 解释代码      │
17  │ • 安装依赖       │       │ • 教学指导      │
18  │ • Git 操作       │       │ • Debug 分析    │
19  └─────────────────┘       └─────────────────┘
20
21  🔗 扩展能力（高级）         🎯 自动化（高级）
22  ┌─────────────────┐       ┌─────────────────┐
23  │ • MCP 工具集成   │       │ • 定时任务      │
24  │ • 自定义技能     │       │ • 工作流编排    │
25  │ • 多模型切换     │       │ • 批量处理      │
26  │ • 第三方服务连接  │       │ • 自动部署      │
27  └─────────────────┘       └─────────────────┘
28

3. 安装 Claude Code —— 3 步搞定

3.1 安装前的准备

在安装之前，你需要确认两件事：

第一步：确认你的操作系统

Claude Code 支持以下系统：

• Windows：Windows 10 或 11
• macOS：macOS 12 或更新版本
• Linux：主流发行版（Ubuntu、Debian、CentOS 等）

第二步：确认你有终端访问权限

• Windows 用户：需要安装 Git Bash 或使用 PowerShell 终端
• Mac 用户：自带 终端（Terminal） 应用
• Linux 用户：自带终端

新手提示：如果你用的是 Windows，强烈建议安装 Git Bash。
下载地址：https://git-scm.com/downloads
Git Bash 让你能在 Windows 上使用类 Linux 的命令行环境，大部分编程教程都基于这个环境。

3.2 安装步骤（以 Windows 为例）

整个安装过程就像安装一个手机 App 一样简单：

1安装流程图
2═══════════════════════════════════════════════════════════
3
4  开始
5   │
6   ▼
7┌──────────────────┐
8│ 步骤1：安装 Node.js │  ← 这是 Claude Code 的运行环境
9│ (版本 ≥ 18.0)     │    就像手机需要操作系统一样
10└──────┬───────────┘
11       │
12       ▼
13┌──────────────────┐
14│ 步骤2：安装       │  ← 在终端里输入一行命令即可
15│ Claude Code      │
16└──────┬───────────┘
17       │
18       ▼
19┌──────────────────┐
20│ 步骤3：验证安装   │  ← 确认安装成功
21└──────┬───────────┘
22       │
23       ▼
24  完成！开始使用
25

步骤 1：安装 Node.js

Node.js 是 Claude Code 的"运行引擎"。你可以把它理解为：Node.js 是舞台，Claude Code 是在舞台上表演的演员。

1# 1. 打开浏览器，访问 https://nodejs.org
2# 2. 下载 LTS 版本（长期支持版，更稳定）
3# 3. 双击安装包，一路点击"下一步"即可
4# 4. 安装完成后，打开终端（Win+R，输入 cmd，回车）
5# 5. 输入以下命令验证安装是否成功：
6
7node --version
8# 如果安装成功，你会看到类似这样的输出：
9# v20.11.0  （版本号可能不同，只要 ≥ 18.0 就没问题）
10
11npm --version
12# 如果安装成功，你会看到类似这样的输出：
13# 10.2.4   （npm 是 Node.js 自带的包管理工具）
14

步骤 2：安装 Claude Code

打开终端，输入下面这一行命令：

1# 使用 npm 全局安装 Claude Code
2# -g 表示"全局安装"，意味着你可以在电脑的任何位置使用它
3npm install -g @anthropic-ai/claude-code
4
5# 安装过程大约需要 1-2 分钟，你会看到很多行安装日志在滚动
6# 这是正常的，不用担心里面的技术细节
7

如果安装失败：99% 的情况是因为网络问题。可以尝试以下方法：

1# 方法1：使用国内镜像源（推荐，速度更快）
2npm install -g @anthropic-ai/claude-code --registry=https://registry.npmmirror.com
3

步骤 3：验证安装

1# 在终端输入以下命令：
2claude --version
3
4# 如果看到版本号输出，说明安装成功！
5# 类似：Claude Code v2.0.0
6

3.3 首次启动与 API Key 配置

Claude Code 需要连接到 Anthropic 的 AI 服务才能工作。这需要一个"钥匙"——API Key。

比喻：API Key 就像你的门禁卡。没有它，你就进不了大楼（用不了 AI 服务）。

1获取 API Key 的流程
2═══════════════════════════════════════════════════════════
3
4  访问 console.anthropic.com
5   │
6   ▼
7  注册 / 登录账号
8   │
9   ▼
10  进入 API Keys 页面
11   │
12   ▼
13  点击 "Create Key" 创建新 Key
14   │
15   ▼
16  ⚠️ 复制并保存好 Key！（只显示一次）
17   │
18   ▼
19  在终端配置 Key
20

配置方法一：环境变量（推荐）

1# 在 Git Bash 终端中输入（Windows用户推荐这种方式）
2# 把下面的 "sk-ant-xxxxx" 替换成你自己的真实的 API Key
3export ANTHROPIC_API_KEY="sk-ant-your-actual-api-key-here"
4
5# 注意：这种方式只在当前终端窗口有效，关闭窗口后需要重新设置
6# 如果你想让这个配置永久生效，继续往下看
7

配置方法二：永久配置（一劳永逸）

1# Windows PowerShell 用户
2# 以管理员身份打开 PowerShell，执行：
3[Environment]::SetEnvironmentVariable("ANTHROPIC_API_KEY", "sk-ant-your-key-here", "User")
4
5# Git Bash / Mac / Linux 用户
6# 把下面这行加到你的 ~/.bashrc 或 ~/.zshrc 文件末尾
7echo 'export ANTHROPIC_API_KEY="sk-ant-your-key-here"' >> ~/.bashrc
8
9# 让配置立即生效
10source ~/.bashrc
11

配置方法三：使用 Claude Code 内置的登录命令

1# 如果你已经有 Anthropic 账号，可以直接用这个命令登录
2claude login
3
4# 这会打开浏览器，让你通过网页完成认证
5# 认证成功后，Claude Code 会自动保存你的凭证
6

3.4 验证一切就绪

1# 在终端输入：
2claude
3
4# 如果一切配置正确，你会进入 Claude Code 的交互界面
5# 你会看到一个类似这样的提示符，表示可以开始对话了：
6#
7# ╭────────────────────────────────────────────╮
8# │  ✨ Claude Code v2.0.0                      │
9# │  Ready to help you build amazing things!    │
10# ╰────────────────────────────────────────────╯
11# >
12

到此为止，安装就完成了！是不是比你想象中简单很多？

4. 第一次对话 —— 跟 AI 说"你好"

4.1 启动 Claude Code

有两种使用 Claude Code 的方式：

方式一：交互模式（最常用）

1# 进入你的项目目录（如果还没有项目，先创建一个空目录）
2mkdir my-first-project      # 创建一个名为 my-first-project 的文件夹
3cd my-first-project          # 进入这个文件夹
4
5# 启动 Claude Code
6claude
7

方式二：单次命令模式

1# 不进入交互界面，直接执行一条指令
2# -p 参数表示 "print"，意思是直接打印结果
3claude -p "写一个 Hello World 的 Python 程序"
4

4.2 你的第一句对话

进入 Claude Code 后，你会看到一个提示符 >。输入你想说的话，然后按回车：

1> 你好！请用中文回复我。请解释一下你是什么，你能帮我做什么？
2

Claude Code 会回复你一段文字，介绍自己的能力和限制。

交互流程图：

1┌─────────────────────────────────────────────────────────┐
2│                    交互模式的工作流程                      │
3├─────────────────────────────────────────────────────────┤
4│                                                         │
5│   你输入问题                                             │
6│   ┌──────────────────────┐                              │
7│   │ > 帮我写一个计算器     │                              │
8│   └──────────┬───────────┘                              │
9│              │                                           │
10│              ▼                                           │
11│   ┌──────────────────────┐                              │
12│   │ Claude Code 分析你的  │  ← AI 理解你的意图             │
13│   │ 需求，读取项目文件    │                              │
14│   └──────────┬───────────┘                              │
15│              │                                           │
16│              ▼                                           │
17│   ┌──────────────────────┐                              │
18│   │ Claude Code 生成代码  │  ← AI 创建或修改文件           │
19│   │ 或执行相关操作        │                              │
20│   └──────────┬───────────┘                              │
21│              │                                           │
22│              ▼                                           │
23│   ┌──────────────────────┐                              │
24│   │ Claude Code 展示结果  │  ← AI 告诉你做了什么           │
25│   │ 等待你的下一步指令    │                              │
26│   └──────────────────────┘                              │
27│              │                                           │
28│              ▼                                           │
29│         继续对话……                                       │
30│                                                         │
31└─────────────────────────────────────────────────────────┘
32

4.3 基本的对话技巧

跟 Claude Code 交流不需要任何特殊技巧——就用你平时跟人聊天的方式。但有几个小窍门可以让沟通更高效：

✅ 好的提问方式：

1> 帮我用 Python 写一个计算器程序，要求支持加减乘除四种运算。
2   用户输入两个数字和运算符，程序输出计算结果。
3   代码要包含详细的中文注释。
4
5> 这段代码运行时报错了，错误信息是：
6   "NameError: name 'result' is not defined"
7   帮我分析一下原因并修复。
8
9> 我的项目里有 5 个 Java 文件，帮我找一下哪个文件里定义了 UserService 类。
10

❌ 不太好的提问方式：

1> 写代码
2   ← 太模糊了，AI 不知道你想要什么
3
4> 修复错误
5   ← 没说是什么错误，AI 无法定位问题
6
7> 帮我做个东西
8   ← 没有具体描述，AI 会困惑
9

核心原则：越具体，AI 的帮助越精准。

4.4 一些常用命令

在 Claude Code 的交互界面中，有一些特殊的"斜杠命令"（以 / 开头），它们是快捷操作：

1# ─── 基础命令 ───
2
3/help              # 显示帮助信息，列出所有可用命令
4# 用法：直接输入 /help 即可
5# 作用：查看 Claude Code 支持的所有功能和快捷命令
6
7/clear             # 清空当前对话历史，开始新的话题
8# 用法：当你想切换话题或之前的对话太长时使用
9# 注意：这不会删除任何文件，只是清空对话记录
10
11/compact           # 压缩对话历史，释放上下文空间
12# 用法：当对话很长，AI 响应变慢时使用
13# 作用：保留关键信息，删除冗余内容，让 AI 重新"聚焦"
14
15# ─── 会话管理 ───
16
17/status            # 查看当前会话状态
18# 显示：当前模型、对话长度、文件变更等信息
19
20/context           # 查看当前上下文包含的内容
21# 显示：AI 当前"看到"了哪些信息
22
23# ─── 文件与项目 ───
24
25/init              # 初始化项目，创建 CLAUDE.md 项目说明文件
26# 用法：在项目根目录执行 /init
27# 作用：让 Claude Code 更好地理解你的项目结构和规则
28
29/add-dir           # 添加一个目录到工作区
30# 用法：/add-dir src/   （将 src 目录加入关注范围）
31
32# ─── 配置与管理 ───
33
34/config            # 查看和修改 Claude Code 的设置
35# 用法：/config 进入设置页面
36
37/model             # 切换使用的 AI 模型
38# 用法：/model opus    （切换到 Opus 模型，能力最强）
39#       /model sonnet  （切换到 Sonnet 模型，速度更快）
40
41# ─── 费用与用量 ───
42
43/cost              # 查看当前会话的费用消耗
44# 用法：/cost    显示本次对话花了多少钱
45
46/usage             # 查看 Token 使用量
47# Token 是 AI 处理文本的计量单位，类似电话的"分钟"
48

5. 核心概念：理解 Claude Code 的"大脑"

在深入使用之前，让我们先了解几个核心概念。这些概念就像开车前要认识的仪表盘——不需要成为工程师，但要知道每个指示灯是什么意思。

5.1 上下文（Context）—— AI 的"短期记忆"

概念解释：

Claude Code 的"上下文"就像 AI 的短期记忆。每次对话中，AI 能"记住"的内容是有限的。这个限制用 Token 来衡量。

什么是 Token？

把 Token 理解为 AI 阅读文本时的"最小单位"：

• 一个中文字 ≈ 1-2 个 Token
• 一个英文单词 ≈ 1-3 个 Token
• 一张图片 ≈ 几百到几千个 Token

就像一个杯子能装的水是有限的，AI 一次能处理的内容也是有限的。

1上下文窗口示意图
2═══════════════════════════════════════════════════════════
3
4  ┌─────────────────────────────────────────────────────┐
5  │              上下文窗口（Context Window）             │
6  │              Claude Opus 最大支持 100 万 Token        │
7  │                                                     │
8  │  ┌──────────────────────┐                           │
9  │  │  系统提示词           │  ← 定义 AI 的角色和行为     │
10  │  │  (System Prompt)     │     如"你是一个编程助手"   │
11  │  ├──────────────────────┤                           │
12  │  │                      │                           │
13  │  │  对话历史             │  ← 你和 AI 你来我往的记录   │
14  │  │  (Conversation)      │     每一轮对话都在这里     │
15  │  │                      │                           │
16  │  │  • 你：帮我写代码     │                           │
17  │  │  • AI：好的，这是代码  │                           │
18  │  │  • 你：有个错误……    │                           │
19  │  │  • AI：我来修复……    │                           │
20  │  ├──────────────────────┤                           │
21  │  │  当前请求             │  ← 你最新输入的问题         │
22  │  │  (Current Request)   │                           │
23  │  └──────────────────────┘                           │
24  └─────────────────────────────────────────────────────┘
25
26  当上下文满了 → AI 可能会"忘记"早期的对话内容
27  解决方法 → /compact 命令压缩对话 或 /clear 清空重新开始
28

如何管理上下文：

1# 查看当前使用了多少上下文
2/context
3
4# 如果对话太长，压缩上下文（保留关键信息，删除冗余）
5/compact
6
7# 完全开始新话题
8/clear
9

5.2 Token —— AI 的"计费单位"

概念解释：

Token 就像电话的"分钟数"——你用得越多，费用越高。但完全在你的可控范围内。

1Token 的直观理解
2═══════════════════════════════════════════════════════════
3
4  中文："你好世界"           ≈ 4 个 Token
5  英文："Hello World"        ≈ 2 个 Token
6  一句普通的中文问句          ≈ 20-50 个 Token
7  一个 100 行的 Python 文件   ≈ 800-1500 个 Token
8  一个中等规模的项目（100个文件） ≈ 50万-200万 Token
9
10  费用参考（以 Claude Opus 为例）：
11  ┌─────────────────────────────────────────────┐
12  │  输入（你发给 AI 的内容）：$5 / 100万 Token    │
13  │  输出（AI 回复的内容）：  $25 / 100万 Token   │
14  │                                             │
15  │  换句话说：                                  │
16  │  • 问一个问题 ≈ 几分钱                        │
17  │  • 写一个完整功能 ≈ 几毛钱                     │
18  │  • 完成一个项目 ≈ 几块钱到几十块钱              │
19  └─────────────────────────────────────────────┘
20

如何查看费用：

1# 在 Claude Code 中随时查看当前会话的费用
2/cost
3
4# 输出示例：
5# Total cost:     $0.42
6# Input tokens:   45,230
7# Output tokens:  2,156
8

5.3 工具（Tools）—— AI 的"手和脚"

概念解释：

如果 AI 的智能是它的大脑，那工具就是它的"手和脚"。没有工具，AI 只能"说"不能"做"。Claude Code 内置了一系列工具，让 AI 能够实际操作你的项目。

1Claude Code 的内置工具一览
2═══════════════════════════════════════════════════════════
3
4  ┌─────────────────────────────────────────────────────────┐
5  │                      工具清单                            │
6  ├───────────────┬─────────────────────────────────────────┤
7  │ 工具名称       │ 作用（用人话解释）                        │
8  ├───────────────┼─────────────────────────────────────────┤
9  │ Read          │ "读文件"——就像你打开文件查看内容           │
10  │               │ 可以读代码、读文档、读图片、读 PDF         │
11  ├───────────────┼─────────────────────────────────────────┤
12  │ Write         │ "写文件"——创建新文件或覆盖已有文件         │
13  │               │ 就像你在编辑器里新建文件并写入内容          │
14  ├───────────────┼─────────────────────────────────────────┤
15  │ Edit          │ "改文件"——精确修改文件中的某段内容         │
16  │               │ 不是整个重写，而是精准替换                 │
17  ├───────────────┼─────────────────────────────────────────┤
18  │ Bash          │ "执行命令"——在终端里运行指令               │
19  │               │ 可以编译代码、安装依赖、运行测试            │
20  ├───────────────┼─────────────────────────────────────────┤
21  │ Glob          │ "找文件"——按文件名模式搜索                 │
22  │               │ 比如找所有 .java 文件或所有 test*.js      │
23  ├───────────────┼─────────────────────────────────────────┤
24  │ Grep          │ "搜内容"——在文件内容中搜索关键词           │
25  │               │ 比如找所有包含"password"的代码行          │
26  ├───────────────┼─────────────────────────────────────────┤
27  │ WebFetch      │ "抓网页"——获取网页内容                    │
28  │               │ 可以读取在线文档、API 说明等               │
29  ├───────────────┼─────────────────────────────────────────┤
30  │ WebSearch     │ "搜网页"——搜索互联网                      │
31  │               │ 查找最新信息、技术方案等                   │
32  ├───────────────┼─────────────────────────────────────────┤
33  │ Task          │ "多任务"——同时处理多个独立工作             │
34  │               │ 比如同时搜索多个目录或处理多个文件          │
35  └───────────────┴─────────────────────────────────────────┘
36

工具是如何工作的？

你不需要手动调用这些工具——你只需要用自然语言说出你的需求，Claude Code 会自动选择合适的工具。

1    你说："帮我把项目里所有的 TODO 注释找出来"
2                         │
3                         ▼
4    Claude Code 内部自动执行：
5    ┌──────────────────────────────────────┐
6    │ 1. 分析需求："找 TODO 注释"          │
7    │ 2. 选择工具：用 Grep 工具搜索        │
8    │ 3. 执行：grep "TODO" 遍历所有文件     │
9    │ 4. 整理结果：把找到的 TODO 列给你看   │
10    │ 5. 回复："找到了 12 个 TODO……"       │
11    └──────────────────────────────────────┘
12

5.4 权限控制 —— 安全的"门禁"

Claude Code 在执行某些操作前会征求你的同意，这是为了保护你的项目安全。

1权限级别说明
2═══════════════════════════════════════════════════════════
3
4  ┌─────────────────────────────────────────────────────────┐
5  │  操作类型            │  是否需要你确认  │  示例           │
6  ├──────────────────────┼─────────────────┼────────────────┤
7  │  读文件              │  不需要（自动）  │  "看看这个文件"  │
8  │  搜索内容            │  不需要（自动）  │  "搜一下 TODO"  │
9  │  写新文件            │  需要确认        │  "创建一个文件"  │
10  │  修改已有文件         │  需要确认        │  "修改这行代码"  │
11  │  执行命令            │  需要确认        │  "运行 npm test"│
12  │  访问外部网站         │  需要确认        │  "查看这个网页"  │
13  │  删除文件            │  需要确认        │  "删除这个文件"  │
14  └──────────────────────┴─────────────────┴────────────────┘
15
16  你可以选择：
17  • 允许（Allow）          —— 仅这次
18  • 总是允许（Always Allow）—— 同类型操作不再询问
19  • 拒绝（Deny）            —— 不允许执行
20

6. 基础操作：读、写、改、搜

现在你已经了解了基本概念，让我们动手实操吧！

6.1 读取文件 —— “帮我看看这个”

这是最基础的操作。你可以让 Claude Code 读取各种类型的文件。

实用场景一：查看代码文件

1场景：你刚接手一个项目，想了解某个文件做了什么
2
3你：帮我看看 src/main/java/com/example/UserController.java 这个文件，
4   解释一下每个方法是做什么的，用中文说明。
5
6Claude Code 会：
71. 自动使用 Read 工具读取文件
82. 分析代码结构
93. 用通俗的中文解释每个方法的作用
104. 可能还会指出潜在的问题或改进建议
11

实用场景二：分析图片内容

1场景：产品经理给了你一张 UI 设计图，让你实现
2
3你：看看这张设计图 design.png，告诉我这是一个什么样的页面布局。
4
5Claude Code 会：
61. 读取图片文件
72. 分析图片中的 UI 元素
83. 描述布局结构
94. 甚至可以帮你生成对应的 HTML/CSS 代码
10

6.2 搜索代码 —— “帮我找到那个”

当项目代码量很大时，手动翻找文件就像大海捞针。Claude Code 能帮你在几秒钟内找到你需要的内容。

实用场景一：搜索文件内容

1场景：你想找到所有调用了 getUserById 方法的地方
2
3你：帮我在整个项目中搜索所有调用 getUserById 的地方，
4   列出文件名和行号。
5
6Claude Code 会：
71. 自动使用 Grep 工具搜索
82. 返回所有匹配的行及其位置
93. 你可以点击行号直接跳转
10

实用场景二：按文件名查找

1场景：你记得有个文件名叫 UserService 但忘了在哪个目录
2
3你：帮我找到所有文件名包含 UserService 的 Java 文件。
4
5Claude Code 会：
61. 使用 Glob 工具按文件名模式匹配
72. 列出所有匹配的文件路径
8

6.3 修改代码 —— “帮我改一下”

这是 Claude Code 的杀手级功能——精确修改代码，不多不少。

代码修改示例：

1场景：你想给 UserService 类添加一个新方法
2
3你：在 src/main/java/com/example/UserService.java 中
4   添加一个 findByEmail 方法，参数是 String email，
5   返回 Optional<User>。
6
7Claude Code 会：
81. 读取 UserService.java 的内容
92. 分析类的结构
103. 在合适的位置插入新方法
114. 确保代码格式和项目风格一致
125. 展示修改后的结果让你确认
13

修改前后对比示意：

1// ========== 修改前 ==========
2public class UserService {
3
4    public Optional<User> findById(Long id) {
5        // 根据 ID 查找用户
6        return userRepository.findById(id);
7    }
8}
9
10// ========== 修改后 ==========
11public class UserService {
12
13    public Optional<User> findById(Long id) {
14        // 根据 ID 查找用户
15        return userRepository.findById(id);
16    }
17
18    // 【新增方法】根据邮箱地址查找用户
19    // @param email 用户的邮箱地址
20    // @return 包含用户的 Optional 对象，如果找不到则为空
21    public Optional<User> findByEmail(String email) {
22        // 调用 Repository 层的 findByEmail 方法查询数据库
23        return userRepository.findByEmail(email);
24    }
25}
26

6.4 执行命令 —— “帮我运行一下”

你不需要记住复杂的命令行指令，直接告诉 Claude Code 你想做什么就行。

1# 场景：你想编译一个 Java 项目
2
3# 传统方式（你需要记住命令）：
4mvn clean compile -DskipTests
5
6# Claude Code 方式（说人话就行）：
7> 帮我编译这个 Java 项目，跳过测试。
8
9# Claude Code 会自动执行：
10# mvn clean compile -DskipTests
11# 然后把编译结果翻译成你能看懂的中文告诉你
12

执行命令的完整流程：

1你说："帮我看看这个 Spring Boot 项目能不能正常启动"
2                         │
3                         ▼
4┌─────────────────────────────────────────────────────────┐
5│  Claude Code 内部处理流程                                │
6│                                                         │
7│  1. 分析项目类型                                         │
8│     → 发现 pom.xml → 判定为 Maven 管理的 Spring Boot 项目 │
9│                                                         │
10│  2. 确定启动命令                                         │
11│     → mvn spring-boot:run                               │
12│                                                         │
13│  3. 请求你的确认                                         │
14│     → "我将执行 mvn spring-boot:run，是否允许？"          │
15│                                                         │
16│  4. 执行命令并捕获输出                                    │
17│     → 启动日志会显示在终端                               │
18│                                                         │
19│  5. 分析结果                                             │
20│     → 如果启动成功：告诉你端口号和访问地址                 │
21│     → 如果启动失败：帮你分析错误原因并修复                 │
22└─────────────────────────────────────────────────────────┘
23

7. 实战演练一：用 Claude Code 写一个网页

理论学完了，让我们动手做一个实际的东西！我们将从零开始，用 Claude Code 创建一个漂亮的个人主页。

7.1 项目准备

1# 1. 创建项目文件夹
2mkdir my-homepage
3cd my-homepage
4
5# 2. 启动 Claude Code
6claude
7

7.2 跟 Claude Code 对话开发

现在，把下面这些"对话"逐条输入给 Claude Code，看看会发生什么：

第一步：提出需求

1> 帮我创建一个个人主页，要求：
2  1. 只用一个 index.html 文件（把 CSS 和 JS 都写在里面）
3  2. 设计要简洁大方，使用现代的设计风格
4  3. 包含以下内容：
5     - 顶部导航栏：首页、关于我、技能、联系方式
6     - 主页横幅区：我的名字（张三）、一句话介绍
7     - 关于我区域：一段个人简介
8     - 技能展示区：用卡片展示我会的技能
9     - 联系方式区：邮箱、GitHub、微信
10     - 底部版权信息
11  4. 颜色方案用蓝色系
12  5. 代码中加上详细的中文注释，我是初学者
13

第二步：预览效果

1# Claude Code 写完后，帮我在浏览器里打开看看
2> 帮我在浏览器里打开这个 index.html 文件
3

第三步：修改优化

1> 我觉得背景色太深了，帮我改成浅蓝色
2> 导航栏的字体再大一些
3> 把技能卡片改成 3 列布局，现在太宽了
4

7.3 完整的代码示例（含详细注释）

下面就是 Claude Code 帮你生成的代码。注意看里面的注释——每一行关键代码都有解释：

1<!DOCTYPE html>
2<!-- 这行告诉浏览器：这是一个 HTML5 文档 -->
3<html lang="zh-CN">
4<!-- lang="zh-CN" 表示页面主要语言是简体中文 -->
5
6<head>
7    <!-- head 标签包含页面的"元信息"——用户看不到，但浏览器需要 -->
8    <meta charset="UTF-8">
9    <!-- 设置字符编码为 UTF-8，这样中文才能正常显示 -->
10
11    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12    <!-- 让页面在手机上也能正常显示（响应式设计的基础） -->
13
14    <title>张三 - 个人主页</title>
15    <!-- 浏览器标签页上显示的标题 -->
16
17    <style>
18        /* ========== 全局样式 ========== */
19        /* * 是通配符，选中所有元素 */
20        * {
21            margin: 0;
22            /* 清除默认的外边距 */
23            padding: 0;
24            /* 清除默认的内边距 */
25            box-sizing: border-box;
26            /* 让宽高计算方式更直观 */
27        }
28
29        /* body 是页面主体，所有可见内容都在里面 */
30        body {
31            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
32            /* 设置字体，从前往后依次尝试 */
33            line-height: 1.6;
34            /* 行高 1.6 倍，让文字不拥挤 */
35            color: #333;
36            /* 文字颜色：深灰色（比纯黑柔和） */
37            background-color: #f0f4f8;
38            /* 背景色：浅蓝灰色 */
39        }
40
41        /* ========== 导航栏样式 ========== */
42        /* nav 是 HTML5 的语义化标签，表示导航区域 */
43        nav {
44            background-color: #1a56db;
45            /* 导航栏背景：深蓝色 */
46            padding: 16px 0;
47            /* 上下内边距 16px，左右 0 */
48            position: sticky;
49            /* 粘性定位：滚动时导航栏固定在顶部 */
50            top: 0;
51            /* 距离顶部 0px */
52            z-index: 100;
53            /* 层级最高，确保不被其他元素遮挡 */
54        }
55
56        /* 导航栏内部的容器，用于控制内容宽度 */
57        nav .container {
58            max-width: 1000px;
59            /* 最大宽度 1000px */
60            margin: 0 auto;
61            /* 上下 0，左右自动（居中） */
62            display: flex;
63            /* 使用弹性布局 */
64            justify-content: space-between;
65            /* 子元素两端对齐 */
66            align-items: center;
67            /* 子元素垂直居中 */
68        }
69
70        /* 网站 Logo/标题 */
71        nav .logo {
72            color: white;
73            /* 文字白色 */
74            font-size: 22px;
75            /* 字体大小 */
76            font-weight: bold;
77            /* 加粗 */
78        }
79
80        /* 导航链接列表 */
81        nav ul {
82            list-style: none;
83            /* 去掉列表的小圆点 */
84            display: flex;
85            /* 让列表项横向排列 */
86            gap: 24px;
87            /* 每项之间的间距 */
88        }
89
90        /* 导航链接样式 */
91        nav ul li a {
92            color: rgba(255, 255, 255, 0.85);
93            /* 半透明白色 */
94            text-decoration: none;
95            /* 去掉下划线 */
96            font-size: 15px;
97            transition: color 0.3s;
98            /* 颜色变化有 0.3 秒过渡动画 */
99        }
100
101        /* 鼠标悬停在导航链接上时的效果 */
102        nav ul li a:hover {
103            color: white;
104            /* 变为纯白色 */
105        }
106
107        /* ========== 横幅区样式 ========== */
108        .hero {
109            background: linear-gradient(135deg, #1a56db 0%, #4f8cf7 100%);
110            /* 渐变背景：从深蓝到浅蓝，135度角 */
111            color: white;
112            padding: 80px 0;
113            /* 上下 80px 的内边距，让横幅更高 */
114            text-align: center;
115            /* 文字居中 */
116        }
117
118        .hero h1 {
119            font-size: 40px;
120            /* 主标题大号字体 */
121            margin-bottom: 12px;
122        }
123
124        .hero p {
125            font-size: 18px;
126            opacity: 0.9;
127            /* 略微透明 */
128        }
129
130        /* ========== 通用容器和区块样式 ========== */
131        .container {
132            max-width: 1000px;
133            margin: 0 auto;
134            padding: 0 20px;
135            /* 左右保留 20px 安全距离 */
136        }
137
138        section {
139            padding: 60px 0;
140            /* 每个区块上下 60px 间距 */
141        }
142
143        section h2 {
144            text-align: center;
145            font-size: 28px;
146            margin-bottom: 36px;
147            color: #1a56db;
148        }
149
150        /* ========== 关于我区域 ========== */
151        .about p {
152            font-size: 16px;
153            text-align: center;
154            max-width: 680px;
155            margin: 0 auto;
156            /* 段落居中，最大宽度 680px，阅读更舒适 */
157        }
158
159        /* ========== 技能卡片区域 ========== */
160        .skills-grid {
161            display: grid;
162            /* 使用网格布局 */
163            grid-template-columns: repeat(3, 1fr);
164            /* 3 列，每列等宽 */
165            gap: 20px;
166            /* 卡片之间的间距 */
167        }
168
169        /* 单个技能卡片 */
170        .skill-card {
171            background: white;
172            /* 白色背景 */
173            padding: 28px;
174            border-radius: 10px;
175            /* 圆角 */
176            text-align: center;
177            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
178            /* 投影阴影：水平0 垂直2px 模糊10px 黑色8%透明度 */
179            transition: transform 0.3s;
180            /* 悬停动画 */
181        }
182
183        .skill-card:hover {
184            transform: translateY(-4px);
185            /* 鼠标悬停时向上移动 4px，有"浮起来"的感觉 */
186        }
187
188        .skill-card .icon {
189            font-size: 36px;
190            /* 图标（emoji）的尺寸 */
191            margin-bottom: 12px;
192        }
193
194        .skill-card h3 {
195            margin-bottom: 8px;
196            color: #1a56db;
197        }
198
199        /* ========== 联系方式区域 ========== */
200        .contact-info {
201            text-align: center;
202            font-size: 16px;
203        }
204
205        .contact-info p {
206            margin-bottom: 8px;
207        }
208
209        /* ========== 页脚样式 ========== */
210        footer {
211            background-color: #1a2938;
212            /* 深色背景 */
213            color: #9ca3af;
214            /* 灰色文字 */
215            text-align: center;
216            padding: 20px 0;
217            font-size: 14px;
218        }
219    </style>
220</head>
221
222<body>
223
224    <!-- ========== 导航栏 ========== -->
225    <nav>
226        <div class="container">
227            <!-- 左侧 Logo -->
228            <span class="logo">张三</span>
229            <!-- 右侧导航链接 -->
230            <ul>
231                <!-- href="#" 表示点击后跳转到当前页面的指定位置 -->
232                <li><a href="#home">首页</a></li>
233                <li><a href="#about">关于我</a></li>
234                <li><a href="#skills">技能</a></li>
235                <li><a href="#contact">联系方式</a></li>
236            </ul>
237        </div>
238    </nav>
239
240    <!-- ========== 主页横幅 ========== -->
241    <section class="hero" id="home">
242        <h1>张三</h1>
243        <p>热爱技术的全栈开发者 | 终身学习者 | 开源爱好者</p>
244    </section>
245
246    <!-- ========== 关于我 ========== -->
247    <section class="about" id="about">
248        <div class="container">
249            <h2>关于我</h2>
250            <p>
251                你好！我是张三，一名拥有 3 年经验的全栈开发者。
252                我热爱用代码创造有价值的软件产品，喜欢学习新技术。
253                工作之余，我活跃在 GitHub 开源社区，参与过多个知名项目的贡献。
254                我相信技术的力量可以让世界变得更好。
255            </p>
256        </div>
257    </section>
258
259    <!-- ========== 技能展示 ========== -->
260    <section id="skills">
261        <div class="container">
262            <h2>我的技能</h2>
263            <div class="skills-grid">
264                <!-- 技能卡片 1 -->
265                <div class="skill-card">
266                    <div class="icon">☕</div>
267                    <h3>Java</h3>
268                    <p>精通 Java 后端开发，Spring Boot 框架</p>
269                </div>
270                <!-- 技能卡片 2 -->
271                <div class="skill-card">
272                    <div class="icon">🐍</div>
273                    <h3>Python</h3>
274                    <p>熟练使用 Python 进行数据处理和 Web 开发</p>
275                </div>
276                <!-- 技能卡片 3 -->
277                <div class="skill-card">
278                    <div class="icon">🌐</div>
279                    <h3>前端开发</h3>
280                    <p>掌握 HTML、CSS、JavaScript 和 Vue.js</p>
281                </div>
282            </div>
283        </div>
284    </section>
285
286    <!-- ========== 联系方式 ========== -->
287    <section id="contact">
288        <div class="container">
289            <h2>联系我</h2>
290            <div class="contact-info">
291                <p>📧 邮箱：zhangsan@example.com</p>
292                <p>🐙 GitHub：github.com/zhangsan</p>
293                <p>💬 微信：zhangsan_dev</p>
294            </div>
295        </div>
296    </section>
297
298    <!-- ========== 页脚 ========== -->
299    <footer>
300        <div class="container">
301            <p>&copy; 2026 张三 | 保留所有权利</p>
302            <!-- &copy; 是版权符号 © -->
303        </div>
304    </footer>
305
306</body>
307</html>
308