2.4 Claude Code

Claude Code 可以理解为一个在电脑里帮你干活的 AI 助手。

你只需要用简单的语言告诉它要做什么，比如「帮我整理这些文件」、「改一下这个程序」、「分析一下这些数据」，它就能理解你的电脑项目，并自动完成很多操作。

它和普通聊天 AI 的区别是：不只是聊天，而是能直接帮你动手做事——整理文件、编程、数据分析等等。

Claude Code 就像一个会自己操作电脑的 AI 助手，帮你更快完成各种工作。

第一步：准备工作

1.1 安装 Claude Code

使用终端、命令行还是挡住了非常多的朋友，这个时候，有个界面很重要！

Claude Code 官方已经推出了 VS Code 插件，安装即可使用，不需要命令行操作。

xcode-select --install

1.2 配置账号

唯一的门槛，就是搞定一个能在 Claude Code 里用的账号。

如何选择？

• 追求效果最好 → 选中转
• 追求简单方便 → 选国产大模型

1.3 在 Claude Code 里配置账号

{
  "env": {
    "ANTHROPIC_AUTH_TOKEN": "你的API_KEY",
    "ANTHROPIC_BASE_URL": "https://你的服务商地址"
  }
}

1.4 使用 Claude Code

配置好账号后，就可以开始用了：

1. 在 VS Code 里，打开一个工作文件夹。工作文件夹是 Claude Code 读取和写入文件的范围。
2. 点击侧边栏的 Claude Code 图标，即可开始对话。

Claude Code 核心功能概览

体验 Claude Code

刚装上不知道做什么？让 Claude Code 帮你整理文件！

1. 打开「下载」文件夹或「桌面」文件夹
2. 打开 Claude Code
3. 输入：帮我整理一下文件

Claude Code 会帮你把文件整理得明明白白的。这是最简单的入门体验。

第二步：做你的第一个作品（15分钟）

为什么做待办清单？

我建议第一个项目做「待办清单」，因为：

• ✅ 够简单：15分钟能完成
• ✅ 够实用：做完了真的能用
• ✅ 够完整：该有的功能都有（增删改查）

最终效果：一个网页，你可以添加任务、标记完成、删除任务，界面干净好看。

先规划再动手（最重要！）

直接让 AI 写代码，容易一团乱。

聪明的做法：先让它给你一个计划，看清楚要做什么，再开始写代码。

我想做一个待办清单网页，要求：
1. 可以添加新任务（输入框+添加按钮）
2. 可以点击任务标记为完成（会有划线效果）
3. 可以删除任务（每个任务旁边有删除按钮）
4. 界面要简洁美观，用现代化的设计

请先给我一个实现计划，包括用什么技术、分几个文件、大概的实现步骤，等我确认后再开始写代码。

好的，我来规划这个待办清单应用：

## 技术选择
- HTML：页面结构
- CSS：样式设计（使用 Flexbox 布局）
- JavaScript：交互逻辑

## 文件结构
1. index.html - 主页面
2. style.css - 样式文件
3. script.js - 功能代码

## 实现步骤
1. 创建 HTML 基础结构（输入框、按钮、任务列表区域）
2. 编写 CSS 样式（现代卡片设计+渐变背景）
3. 实现 JavaScript 功能（添加、完成、删除）
4. 添加本地存储，刷新页面后数据不丢失

准备好了吗？我可以开始实现。

看着代码自己写出来

这是最神奇的部分。

你会看到 Claude 开始自己工作：

1. 创建 index.html 文件，写入 HTML 代码
2. 创建 style.css 文件，写入样式代码
3. 创建 script.js 文件，写入交互逻辑

整个过程你什么都不用做。就像看着一个程序员在你的电脑上工作。

大概2-3分钟，所有代码就写完了。

打开浏览器看效果

代码写完后，Claude 会告诉你怎么运行。

Mac 用户：在 Finder 里找到项目文件夹，双击 index.html

Windows 用户：在文件资源管理器里找到这个文件夹，双击 index.html

浏览器会打开，你会看到：

• 顶部有个大标题「我的待办清单」
• 一个输入框，旁边有「添加」按钮
• 下面是任务列表区域

试试添加一个任务：学会用 Claude Code，点击添加。

你的第一个任务出现了！点击任务可以标记完成（会有划线），旁边的删除按钮可以删掉它。

第三步：加一个新功能

现在你可能会想：能不能改改？

当然可以，而且超级简单。

提一个新需求

假设你想给每个任务加上时间戳，显示是什么时候添加的。

直接在 Claude Code 里说：

我想给每个任务加上创建时间，格式是「2025-11-18 15:30」，显示在任务文字的下面，用小字灰色显示

Claude 会自动修改

Claude 会：

1. 告诉你需要改哪些地方
2. 自动修改 script.js 添加时间记录逻辑
3. 自动修改 style.css 添加时间显示的样式

你只需要刷新浏览器，新功能就生效了。

这就是 AI 协作的感觉：你提需求，它写代码，你验收效果。

不满意？继续对话调整。

试试其他功能

你还可以尝试：

• 「加一个优先级标签，重要的任务显示红色」
• 「加一个全部删除按钮」
• 「换一个配色方案，我想要蓝色系」

每次 Claude 都会理解你的意思，自动改代码。

新手常见问题

Q1：改错了怎么办？

别慌，Claude Code 有「时光机」功能。

方法一：按 ESC 两次，快速回退到上一个版本

方法二：输入命令 /rewind，Claude 会列出历史版本，你可以选择回到哪个时间点

方法三：直接说「刚才那个改动我不喜欢，还原回去」

Q2：我完全不懂代码，怎么知道 Claude 做的对不对？

答案：你不需要懂代码，你只需要测试功能。

就像你不需要懂汽车发动机，也能知道车能不能开。

测试清单：

• ✅ 添加任务试试，能加上吗？
• ✅ 标记完成试试，有划线吗？
• ✅ 删除试试，真的删掉了吗？
• ✅ 刷新页面，数据还在吗？

功能对了，代码就是对的。

有问题？直接告诉 Claude：「删除按钮点了没反应」，它会自己检查和修复。

Q3：request body too large 报错是什么意思？

发给 Claude Code 的图片太大时，会超出它的处理能力导致报错。

解决办法：新开一个对话。之前的对话继续也会带上之前发的图片，所以无法继续。后续不要给 AI 发长图、大图。

Q4：为什么有些教程说要装 Node.js？

Q5：cc-switch 配置后还是报错？

确认你的配置里正确使用了 ANTHROPIC_API_KEY 或 ANTHROPIC_AUTH_TOKEN，具体用哪个取决于你的服务商，参考服务商提供的配置文档。

Q6：为什么执行一键安装命令报错？

如果你使用了代理工具，但命令行默认不走代理，需要额外配置：

export https_proxy=http://127.0.0.1:端口号 http_proxy=http://127.0.0.1:端口号

按回车后，再次执行安装命令即可。端口号替换成你代理工具的实际端口。

Q7：VS Code 是英文，怎样换成中文？

安装中文语言包即可：Chinese Language Pack 

Q8：我应该从这个开始学编程吗？

这取决于你的目标。

如果你想快速做出东西（做个工具、验证个想法、自动化工作）：

• ✅ 从 Claude Code 开始是对的
• ✅ 边做边学，有问题就问 Claude
• ✅ 遇到不懂的概念，让 Claude 解释

如果你想成为专业开发者：

• ⚠️ Claude Code 是很好的辅助，但不能替代系统学习
• 📚 建议路径：用 AI 做出第一个项目（建立信心）→ 系统学习基础 → 再用 AI 加速开发

下一步：你可以做什么？

完成了这15分钟的教程，你已经掌握了：

• ✅ 安装和配置 Claude Code
• ✅ 先规划再动手的方法
• ✅ 让 AI 写代码并运行
• ✅ 迭代修改功能
• ✅ 解决常见问题

接下来试试这些

1. 做个你真正需要的工具

• 记账页面？
• 倒计时器？
• 个人简历网站？

2. 挑战：给待办清单加功能

• 加一个「优先级」分类（高/中/低）
• 加一个搜索功能
• 换成你喜欢的配色

3. 学习更多技巧

• 查看 提示词修炼
• 了解 Claude Code Skills

下一节：提示词修炼 - 掌握与 AI 对话的艺术