「学习内容」Claude Code 新手基础教程指南🧣

主要讲了一个案例：

使用 claude code 完成一个网页的开发，使用 github 完成代码的管理和推送，然后使用 vercel 完成网页项目的部署。

www.youtube.com/watch?v=dgO...

howtobuild.app

howtobuild.app/Claude_Code...

Claude Code 新手指南内容总结

这个视频详细介绍了 Cloud Code 的各项功能和使用方法，并通过一系列实际操作案例进行了演示。

1. Claude Code 概述

定义：Claude Code 是一个基于终端（terminal-based）的 Agent，它本质上是一个 Node.js 进程，可以在服务器上直接安装运行。
特性：
- 通用性（General Purpose） ：可以与 Cloud Code 对话，询问任何问题，甚至查询特斯拉股价等。
- 融入现有工作流：由于其基于终端的特性，可以很好地与当前的工作流绑定。
- 模型优势：Claude Code 之所以出色，是因为其底层模型本身足够优秀，而非依赖于复杂的 Prompt Engineering。
YouTube Ask 功能：视频中提到 YouTube 最近推出的新功能，允许与视频进行交互（目前仅支持英文视频，需 Premium 账户和美国网络），可以帮助定位视频中提及特定内容的片段。

2. 系统要求与订阅计划

运行环境：支持 macOS 和 Linux；Windows 系统需要通过 WSL (Windows Subsystem for Linux) 运行。视频教程主要基于 Windows WSL 进行演示。
软件依赖：需要安装 Node.js (版本 18 或更高)；Git 推荐安装 (用于 GitHub 相关工作流，如 Pull Request)；GitHub CLI 工具也推荐安装。
可用地区：仅在支持的国家/地区可用。
订阅模式：
- P Plan (Pro) ：与 Claude 账户绑定，每 5 小时 45 条消息。对于入门用户足够使用。
- MAX Plan：每月 100 美元，每 5 小时 225 条消息，50 到 200 个 Prompt。
- MAX 20X Pro：每月 200 美元，每 5 小时 900 条消息，适合日常使用、处理大型代码库或高级用户。

3. 学习资源

官方渠道：Anthropic 官网上的 Cloud Code 概述和最佳实践是最好的学习资料。
YouTube：Claude Code 作者发布的视频以及其他技术类 YouTuber 的视频。
本视频幻灯片：视频作者表示其幻灯片已涵盖了大部分内容。

4. 核心功能与执行案例

以下是视频中演示的 Claude Code 核心功能及其执行案例：

基础操作与模式
- 安装/更新：
  - 执行 npm install @anthropic-ai/cloud-code 进行安装或更新。
  - 执行 cloud update 检查并更新到最新版本 (例如，当前版本 1.0.43)。
- 基本对话：
  - 在终端中输入 Claude 命令，即可与 Claude Code 开始对话。
- 无头模式 (Headless Mode) / 作为聊天机器人：
  - 执行 Claude -p "tell me a joke about open"，Cloud Code 会直接返回笑话，例如"Why did open AI model go to therapy? Because it had too many parameters (参数太多)"。
- 文件列表查询：
  - 创建 a.txt, b.txt, c.txt 文件后，执行 cloud -p "list any text files in my folder"，Cloud Code 会列出这些文本文件。
- 高级脚本编写与执行：
  - 安装 jq (JSON 处理器)。
  - 执行 Claude yolo -p "write a Python script that lists all my .txt files" --output-format json | jq -r ".result" | grep -oE "Word+\.py" | head -n 1 | xargs python。此命令让 Cloud Code 编写一个 Python 脚本来列出 .txt 文件，并立即执行该脚本，输出结果。
    - 案例：生成 listtext.py 文件，并成功列出当前文件夹下的 aa.txt, b.txt, c.txt。
- 生成代码文件：
  - 执行 Claude -p "write hello word c language file"，让 Cloud Code 生成一个 C 语言的 "Hello World" 文件。
  - 案例：生成 hello.c，然后通过 gcc hello.c -o hello 编译并运行 ./hello，输出 "Hello World"。
项目管理与上下文
- 初始化项目 (Claude init) ：
  - 执行 Claude init，Cloud Code 会在当前项目目录中生成一个 cloud.md 文件。这个文件包含对整个项目的描述和架构分析，帮助 Cloud Code 理解项目上下文。
  - 案例：生成 cloud.md，其中包含"这是一个非常简单的 C console application"的架构描述。
- 添加文件/文件夹到上下文 (cloud add) ：
  - 执行 Claude add hello，让 Cloud Code 解释 hello 文件是什么。
  - 案例：Cloud Code 解释 hello 是一个可执行文件，由编译 hello.c 生成。
- cloud.md 的作用：
  - 它是 Cloud Code 理解项目上下文最关键的文件，包含了整个上下文的重要信息。
  - 在 Windows WSL 环境下，任何拖拽到 Cloud Code 聊天框的资源路径，都需要转换为 Mount C:/ 格式，否则 WSL 无法读取 Windows 的正常路径。
  - 案例：在 Claude .md 中可以看到 we are in Windows wsl 的环境信息。
增强输入与快捷键
- 多行编辑：
  - 在 Windows WSL 环境下，使用 Ctrl + Enter 进行多行输入。
  - 在 Cursor IDE 中，使用 Alt + Enter 进行多行输入。
- 快捷键：
  - Ctrl + R：切换详细输出（verbal output），显示或隐藏额外信息。
  - 上/下方向键：切换历史消息。
  - Escape 两次：清空当前输入，或显示所有历史消息。
  - Ctrl + U：删除光标到行首的内容。
  - Ctrl + K：删除光标到行尾的内容。
  - Ctrl + Shift + M：键盘选择文本。
- 拖拽图片：
  - 可以直接将图片拖拽到终端中，让 Cloud Code 解释图片内容。
  - 案例：拖拽一张包含"February March April May"的梗图，Cloud Code 成功识别并解释这是一个利用月份名称作为名词和动词的双关语笑话。
权限管理与别名
- 跳过权限确认 (Claude dangerously skip permissions) ：
  - 这个参数会绕过 Claude Code 对文件读写和命令执行的权限确认，作者建议日常使用中尽量避免使用，以确保流程可控。
  - 案例：执行 Claude dangerously skip permissions tell me a joke and save to joke.txt，Cloud Code 会直接创建并保存文件，无需确认。
  - 对比：不加该参数时，执行 cloud tell me a joke and save to joke.txt 会出现"Do you want to create joke.txt?"的权限确认提示。
- 自定义别名 (alias) ：
  - 为了简化长命令，可以通过 alias 命令设置别名。
  - 案例：
    - alias Claude _yolo="Claude dangerously skip permissions"，然后运行 Claude _yolo。
    - 自定义别名 crazy 等于 cloud dangerously skip permissions，然后运行 crazy 也会显示"bypassing permissions"。
GitHub 集成
- 安装 GitHub App：
  - 执行 Claude install github app 将 Cloud Code 与 GitHub 账户绑定。
  - 案例：绑定 H to build 仓库，为后续 GitHub Actions 演示做准备。
- IDE 集成 (VS Code / Cursor) ：
  - 在 VS Code 中，连接到 WSL，打开项目文件夹，并安装 Cloud Code 扩展。
  - 案例：在 Cursor IDE 中，Cloud Code 连接成功，可以在 IDE 侧边栏与 Cloud Code 交互，并同时在终端中执行其他任务（例如，让 Cloud Code 写 Python 文件，同时让 Cursor Agent 写 Rust 文件）。
- 选择上下文 (Selection Context) ：
  - 在 IDE 中选择代码行，Cloud Code 可以解释这些代码行。
  - 案例：在 hello.c 文件中选择一行 print "Hello World"，然后让 Cloud Code 解释，它会准确识别并解释该行代码。
记忆功能 (Memory)
- 添加记忆：
  - 使用 # 或 pound 符号后跟要添加的文本来添加记忆。
  - 记忆类型：
    - Project Memory ：存储在 cloud.md 中，随项目代码一起提交，团队成员共享。
    - Local Memory ：存储在 cloud.local.md 中，特定于当前用户和项目，不随代码提交。
    - User Memory：全局记忆，跟随当前用户。
  - 案例：将"communication preferences when replying translate the response into Chinese"添加到 Local Memory。之后输入"hi"，Cloud Code 回复"你好，我是 Cloud Code，可以帮助你分析这个......"。
  - 案例：User Memory 中包含"我们是 WindowsWSL 用户"，以及期望屏幕分辨率为 1680x1050。
- 编辑记忆：
  - 执行 cloud memory edit 可以编辑项目、用户或本地记忆。
  - 案例：编辑 Local Memory，将其翻译偏好改为日语，然后 Cloud Code 会用日语回复。
- 检查记忆：
  - 执行 cloud memory check local 或 cloud memory check user 查看相应的记忆内容。
- 删除记忆：
  - 执行 cloud mcp remove [memory_name]。
自定义命令 (Custom Commands /)
- 创建命令 ：在 ~/.cloud/cms 目录下创建 .md 文件，即可定义自定义命令。
  - 案例：
    - 创建 f.md 内容为 tell me a joke，执行 /f 会讲一个笑话。
    - 创建 shai.md 内容为 find weather of Shanghai today，执行 /shai 会通过 Web Search 查询上海天气。
- 带参数的命令：自定义命令支持传入参数。
  - 案例：
    - 创建 stock.md 命令，执行 /stock NASDAQ 查询纳斯达克实时股价。
    - 创建 weather.md 命令，执行 /weather Wuhan 查询武汉今日天气。
MCP (Model Control Panel)
- 作用：允许 Cloud Code 与桌面应用和浏览器进行交互，例如打开网页、进行自动化测试、截屏等。
- 列出 MCP 服务器：
  - 执行 cloud mcp list 查看已配置的 MCP 服务器。
- 从 Cloud Desktop 导入 MCP：
  - 执行 cloud mcp from cloud desktop (在 WSL 中无法直接使用，因格式问题)。
- 手动添加 MCP (例如 Puppeteer) ：
  - 案例：通过命令行添加一个基于 Puppeteer 的 MCP 服务器，用于在 WSL 中控制浏览器。
- 使用 MCP 打开网页：
  - 案例：执行 cloud open wider.com，MCP 会打开 wider.com 网页，并按照用户记忆中设定的 1680x1050 分辨率显示。
  - 案例：同样成功打开了 msn.com 和 cn.com。
- 通过 mcp.json 配置 MCP：
  - 在项目根目录下创建 mcp.json 文件，其中包含 MCP 的配置信息，Cloud Code 会自动导入。
  - 案例：移除之前手动添加的 Puppeteer MCP，然后通过 mcp.json 文件再次导入，并成功打开 cn.com。
- 自动化测试：MCP 可以用于自动化测试和截屏，将当前界面内容提供给 Cloud Code。
Hooks (钩子)
- 定义：用户定义的 shell 命令，在 Cloud Code 生命周期中的不同时间点（如工具使用前/后、文件编辑前）执行，类似回调函数。
- 添加 Hooks ：执行 cloud hooks add，选择触发事件和要执行的命令。
- 案例：添加一个 beforedit write backup our file 的 Hook，在文件编辑或写入之前自动备份文件。
  - 当执行 cloud update our hello.c file change message to hello new world 时，该 Hook 会被触发，在修改 hello.c 之前创建了一个备份文件（例如 hello.c.212352），其中包含修改前的"Hello World"内容，而 hello.c 则更新为"Hello New World"。
GitHub Actions 高级工作流 (Magic Moment)
- 配置：需要将 Cloud Code GitHub App 绑定到 GitHub 账户，并在仓库中设置 ANTHROPIC_API_KEY 为 secret。将 cloud.yaml 工作流文件复制到 .github/workflows/ 目录下。
- 自动 Issue 处理 ：在 GitHub 上创建一个 Issue，并 @cloud (或 @cloud code)，Cloud Code 就会自动开始处理任务。
- 案例一：重定向 Get Started 按钮到第一个教程页面：
  - 需求：将 header 中的 Get Started 按钮从重定向到 contact 页面改为重定向到博客页面的第一个教程。
  - 流程：用户创建 Issue 并 @cloud。Cloud Code 自动分析需求，制定计划 (阅读 cloud.md、探索代码库、定位 header、找到教程页面、识别第一个教程、更新代码、测试更改、提交更改)。Cloud Code 自动创建分支、修改代码、创建 Pull Request (PR)，并最终合并 PR，触发 Vercel 部署。
  - 结果：部署后，点击 Get Started 按钮成功跳转到"building your first AI chatbot"教程。
- 案例二：重定向 hero section 的 Get Started 按钮到 Cloud Code 指南页面：
  - 需求：将 hero section 中的 Get Started 按钮重定向到 Cloud Code 指南页面 (视频作者的 Google Slide 转换成的 HTML 页面)，并创建 PR、合并、推送和自动部署。
  - 流程：用户创建 Issue，附上 HTML 页面内容，并 @cloud。Cloud Code 自动完成提交、推送。
  - 结果：部署后，点击 hero section 的 Get Started 按钮，成功跳转到包含视频所有幻灯片内容的 Cloud Code 指南页面。
- 本地验证 deployed 站点：
  - 案例：使用 pnpm dev 启动本地开发服务器，并结合 MCP (puppeteer) 让 Cloud Code 自动打开本地站点，验证 Get Started 按钮是否正确重定向。Cloud Code 自动处理了 WSL 环境下的 IP 寻址问题，最终成功打开并验证了本地站点。
- 终端中的 GitHub Actions：
  - 案例：在终端中直接向 Cloud Code 提出修改 GitHub Issue 的需求（将联系页面上的"Let's start conversation"改为"Let's start conversation together"）。Cloud Code 同样自动生成计划、执行、创建 PR、合并并部署，实现功能上线。

5. 总结

视频展示了 Cloud Code 作为智能 Agent 的强大功能，尤其在自动化开发工作流、项目管理、代码生成、权限控制、内存管理、自定义命令以及与 GitHub Actions 和 IDE 的深度集成方面。作者强调了 Cloud Code 能够将复杂任务简化，提高开发效率，即使是非技术人员也能利用 AI 助手完成工作。