Claude Code 通关手册（一）：Cursor 用户转 Claude Code，第一天我就后悔了——后悔没早点用
这是「Claude Code 通关手册」系列的第 1 篇，共 10 篇。本系列将带你从零开始，系统掌握 Claude Code 的完整知识体系——从 CLI 命令到自动化工作流，从个人使用到团队协作。
你可能已经在用 Cursor 写代码了。
每天打开编辑器，Tab 一下自动补全，Cmd+K 唤出 AI 对话框，写写改改，效率还不错。
然后某天你听说了 Claude Code，装上一看——一个光秃秃的终端界面，没有花哨的 UI，没有智能补全的小弹窗，甚至没有一个像样的"开始"按钮。
你的第一反应大概率是：就这？
别急着关掉它。这个看起来"简陋"的终端工具，藏着一套完全不同的 AI 编程哲学。
今天这篇文章，我不会铺天盖地地讲功能列表，而是带你搞清楚三件事：Claude Code 到底是什么定位、怎么 5 分钟装好跑起来、以及它凭什么让越来越多的开发者"回不去了"。
先搞清一件事：Claude Code 不是"另一个 Cursor"
很多人踩的第一个坑，就是拿 Cursor 的思维去理解 Claude Code。
打个比方你就明白了——
你去餐厅吃饭。Copilot 是那个帮你递菜单、推荐菜品的服务员，你点什么它建议什么，效率确实高。Cursor 是一个坐在你旁边的美食顾问，你边吃边聊，它能帮你分析菜品搭配、调整口味，甚至帮你跟厨房沟通。
那 Claude Code 呢？它是后厨的总调度。
它不坐在你面前陪你聊天，而是直接进厨房——调配原料、指挥厨师、控制出菜节奏、管理整条流水线。你说"我要一桌川菜宴席"，它就去把整桌菜给你安排出来。
翻译成技术语言：
code┌──────────────────────────────────────────────────────┐
│ AI 编程工具的三个层次 │
├──────────────────────────────────────────────────────┤
│ │
│ ┌────────────────┐ │
│ │ Copilot │ 代码补全层 │
│ │ "服务员" │ → 你写一行，它补下一行 │
│ └───────┬────────┘ │
│ ↓ │
│ ┌────────────────┐ │
│ │ Cursor │ IDE 集成层 │
│ │ "美食顾问" │ → 你改一个文件，它帮你优化 │
│ └───────┬────────┘ │
│ ↓ │
│ ┌────────────────┐ │
│ │ Claude Code │ 平台层 │
│ │ "后厨总调度" │ → 你描述需求，它跑完整个流程 │
│ └────────────────┘ │
│ │
│ 关键区别： │
│ Copilot 帮你写一行代码 │
│ Cursor 帮你改一个文件 │
│ Claude Code 帮你跑完一个流程 │
│ │
└──────────────────────────────────────────────────────┘这不是谁好谁差的问题——而是它们根本就不在同一个维度上竞争。
Cursor 的核心价值是"编辑器里的 AI 助手"，Claude Code 的核心价值是"可编程的 AI 开发平台"。
为什么终端界面反而是优势？因为终端意味着：
- 可脚本化——你能用 bash 脚本调用它，定时执行任务
- 可编程——官方提供 TypeScript 和 Python SDK，你能像调用函数一样调用它
- 可集成——塞进 GitHub Actions、CI/CD 流水线，7×24 小时自动运转
- 可扩展——子代理、MCP 协议、Hooks、Plugins，一整套扩展生态
一句话总结：Cursor 是你的 AI 副驾驶，Claude Code 是你的 AI 自动驾驶系统。 副驾驶再好，也得你握方向盘。自动驾驶系统——你可以告诉它目的地，然后去喝杯咖啡。
当然，自动驾驶也需要学习如何设定目的地和安全规则。这就是本系列要教你的事情。
系列路线图：10 篇带你从入门到自动化
在正式动手之前，先给你看一下全局地图，这样你心里有数——我们要走多远，现在在哪里。
code┌─────────────────────────────────────────────────────┐
│ Claude Code 通关手册 · 10 篇路线图 │
├─────────────────────────────────────────────────────┤
│ │
│ ★ 入门篇（你在这里） │
│ ┌─────────────────────────────────────────┐ │
│ │ ① 安装 & CLI 核心命令 ← 本篇 ★ │ │
│ │ ② 权限系统 & @mentions 工作流 │ │
│ └─────────────────────────────────────────┘ │
│ ↓ │
│ 配置篇 │
│ ┌─────────────────────────────────────────┐ │
│ │ ③ CLAUDE.md — 给 AI 一份项目说明书 │ │
│ │ ④ 自定义命令 & 模型选择策略 │ │
│ └─────────────────────────────────────────┘ │
│ ↓ │
│ 扩展篇 │
│ ┌─────────────────────────────────────────┐ │
│ │ ⑤ 子代理 — 从单兵作战到 AI 团队 │ │
│ │ ⑥ MCP 协议 — 连接整个开发生态 │ │
│ │ ⑦ Hooks + Skills + Plugins │ │
│ └─────────────────────────────────────────┘ │
│ ↓ │
│ 自动化篇 │
│ ┌─────────────────────────────────────────┐ │
│ │ ⑧ Headless + SDK — 用代码指挥 AI │ │
│ │ ⑨ GitHub Actions + 沙箱安全 │ │
│ └─────────────────────────────────────────┘ │
│ ↓ │
│ 协作篇 │
│ ┌─────────────────────────────────────────┐ │
│ │ ⑩ 从个人利器到团队基建 │ │
│ └─────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────┘每一篇都会围绕一个真实的 Next.js 技术博客项目（DevPulse） 来做实操演示。不是干巴巴讲概念，而是每篇都有你能跟着做出来的东西。
好了，地图看完了，现在开始第一步——把 Claude Code 装上。
安装 Claude Code：三条路线，选适合你的
2026 年 2 月的重要更新：Anthropic 官方已经将 npm 安装标记为废弃（deprecated），推荐使用原生安装器。原生安装器不依赖 Node.js，启动更快，自动更新。
路线一：原生安装器（官方推荐）
这是目前最推荐的方式，一行命令搞定，不需要预装 Node.js。
macOS / Linux：
bashcurl -fsSL https://claude.ai/install.sh | bash
安装完成后，重新加载你的 shell 配置：
bash# 如果你用 zsh（macOS 默认）
source ~/.zshrc
# 如果你用 bash
source ~/.bashrcWindows（PowerShell）：
powershellirm https://claude.ai/install.ps1 | iexWindows 用户注意：如果你习惯用 WSL（Windows Subsystem for Linux），也可以在 WSL 的 Ubuntu 终端里用 Linux 的安装命令。两种方式都可以，选你顺手的。
验证安装：
bashclaude --version
看到版本号输出，就说明安装成功了。如果遇到问题，Claude Code 内置了一个"医生"命令，帮你自动诊断：
bashclaude doctor
它会检查你的安装状态、PATH 配置、认证状态等，哪里有问题一目了然。
路线二：Homebrew（macOS 用户的备选）
bashbrew install claude-code
注意：Homebrew 安装不会自动更新，需要你手动执行 brew upgrade claude-code 来获取新版本。考虑到 Claude Code 更新非常频繁（几乎每周都有新功能），我个人更推荐路线一。
路线三：npm（仍然可用，但已废弃）
bashnpm install -g @anthropic-ai/claude-code
如果你之前通过 npm 安装过，建议迁移到原生安装器。你的配置文件（~/.claude/settings.json 和项目里的 .claude/ 目录）在迁移过程中会被保留，不用担心丢失。
认证：两种付费方式
Claude Code 不是免费的，你需要选择一种付费方式：
code┌──────────────────────────────────────────────────────┐
│ Claude Code 认证方式对比 │
├──────────────────────────────────────────────────────┤
│ │
│ 方式一：Claude Pro / Max 订阅 │
│ ├── 固定月费，适合高频使用者 │
│ ├── 首次启动时浏览器弹窗登录 │
│ └── 推荐给日常开发使用的同学 │
│ │
│ 方式二：API Key（按量付费） │
│ ├── 用多少付多少，适合偶尔使用或自动化场景 │
│ ├── 在 Anthropic Console 获取 Key │
│ └── 设置环境变量： │
│ export ANTHROPIC_API_KEY="your-key-here" │
│ （加到 ~/.zshrc 或 ~/.bashrc 中持久生效） │
│ │
│ 选择建议： │
│ 如果你每天都用 → 订阅更划算 │
│ 如果你主要跑自动化脚本 → API Key 更灵活 │
│ │
└──────────────────────────────────────────────────────┘第一次启动 claude 命令时，它会引导你完成认证流程，跟着提示走就行。
四个命令打天下：90% 的日常工作就靠它们
Claude Code 的命令其实非常多，但你刚开始只需要记住四个。就像学开车——你不需要一上来就研究发动机原理，先学会启动、刹车、转向、倒车，就能上路了。
命令一：claude —— 启动交互模式
bash# 进入你的项目目录
cd your-project
# 启动 Claude Code
claude这是你最常用的命令，没有之一。输入 claude 后回车，你就进入了一个交互式对话界面。在这里，你可以用自然语言跟 Claude 交流，让它帮你分析代码、写功能、修 Bug、做重构。
打个比方：这就是你跟 AI 的"面对面会议室"。你说需求，它干活。
重要细节：一定要先 cd 到你的项目目录再启动。Claude Code 会自动读取当前目录下的文件，作为它理解你项目的上下文。如果你在 HOME 目录启动，它就什么项目信息都看不到。
命令二：claude -p "提示词" —— 单次执行
bash# 问一个问题，得到回答后自动退出
claude -p "这个项目的目录结构是怎样的？给我一个概览"-p 是 --print 的缩写。它执行一次提示，输出结果，然后自动退出。不会进入交互模式。
什么时候用它？
- 写 shell 脚本串联自动化任务时
- 快速问一个不需要多轮对话的问题时
- 需要把 Claude 的输出 pipe 给其他命令时
bash# 高级用法：输出 JSON 格式，方便程序解析
claude -p "列出 src/ 下所有组件文件" --output-format json打个比方：如果 claude 是开一场会，那 claude -p 就是发一条微信消息——问完就走，不用寒暄。
命令三：claude -c —— 继续上次对话
bash# 继续你最近的那次对话
claude -c你昨天跟 Claude 讨论了一个复杂的重构方案，今天想接着聊。不用重新解释背景，-c（--continue）帮你无缝衔接。
这个命令非常重要，因为 AI 对话中最浪费 Token 的事情就是反复解释上下文。一个 -c 省下的不只是时间，还有真金白银的 Token 费用。
命令四：claude -r —— 从检查点恢复
bash# 回到上一个安全点
claude -rClaude Code 有一个叫"检查点（Checkpoint）"的机制——每次它做修改之前，会自动保存当前状态。如果它改出了问题，-r（--resume）让你一秒回到之前的安全点。
打个比方：这就是游戏里的"存档读档"。Claude 帮你自动存档，你随时可以读档重来。
四个命令速查表
code┌──────────────────────────────────────────────────────────┐
│ Claude Code 四大核心命令 │
├──────────┬───────────────────┬───────────────────────────┤
│ 命令 │ 用途 │ 比喻 │
├──────────┼───────────────────┼───────────────────────────┤
│ claude │ 启动交互模式 │ 开一场面对面会议 │
│ claude -p│ 单次执行 │ 发一条微信消息 │
│ claude -c│ 继续上次对话 │ 昨天的会议今天接着开 │
│ claude -r│ 从检查点恢复 │ 游戏读档 │
└──────────┴───────────────────┴───────────────────────────┘先把这四个命令练到条件反射，其他的后面用到了再学。
实战演练：用 Claude Code 初始化 DevPulse 项目
概念讲完了，动手做一次你就全明白了。
我们来创建一个 Next.js 技术博客项目——DevPulse。这个项目会贯穿整个系列，每篇文章都会在它基础上添加新功能。
第一步：创建项目目录并启动 Claude Code
bashmkdir devpulse && cd devpulse
claude第二步：用自然语言描述你的需求
进入交互模式后，输入以下内容：
code帮我初始化一个 Next.js 14 项目，要求如下：
1. 使用 App Router（不用 Pages Router）
2. TypeScript 严格模式
3. Tailwind CSS 做样式
4. 项目名叫 DevPulse，是一个技术博客平台
5. 创建基础的首页布局，包含导航栏、文章列表区域、侧边栏
6. 组件放在 src/components/ 目录下
7. 页面放在 src/app/ 目录下然后你会看到 Claude Code 开始工作：
- 它先分析你的需求，拟定执行计划
- 然后开始执行命令——
npx create-next-app@latest - 接着创建组件文件、编写页面代码
- 最后给你一个总结，告诉你它都做了什么
这个过程中，它会询问你的许可。 比如"我要运行 npx create-next-app，可以吗？"——这就是权限系统在工作。现在你先点"允许"就好，下一篇文章我们会详细讲权限系统的精髓。
第三步：验证项目
Claude Code 完成后，打开一个新终端窗口：
bashcd devpulse
npm run dev打开浏览器访问 http://localhost:3000，你应该能看到 DevPulse 的初始页面了。
第四步：用 Claude Code 做一次代码审查
回到 Claude Code 的交互模式（如果已退出，用 claude -c 继续），输入：
code审查一下刚才生成的首页组件 @src/app/page.tsx，
看看有没有 TypeScript 类型问题、性能隐患、或者不符合 Next.js 14 最佳实践的地方注意这里的 @src/app/page.tsx——这是 Claude Code 的文件引用语法。用 @ 符号加文件路径，Claude 会自动读取这个文件的完整内容作为上下文。不用你手动复制粘贴代码。
你还可以引用整个目录：
code审查 @src/components/ 目录下所有组件的代码质量甚至同时引用多个文件：
code对比 @src/app/page.tsx 和 @src/app/layout.tsx，
检查它们之间的数据传递是否合理这个 @ 引用的威力，等你用上就知道了——它比复制粘贴代码高效 10 倍，而且 Claude 能看到完整的文件上下文而不是你截取的片段，给出的建议自然也更准确。
Claude Code 凭什么让人"回不去"？
说到这里，你可能已经感觉到了——Claude Code 跟其他 AI 编程工具的交互方式完全不同。
但"不同"不代表"更好"，对吧？我来说说它真正让人"回不去"的三个特质：
特质一：它直接操作你的项目，而不是给你看代码片段
在 Cursor 里，AI 建议你怎么改，你接受后它帮你改。这已经很好了。
但 Claude Code 更进一步——你告诉它"给这个项目加上暗色模式"，它会自动找到需要修改的文件、创建新的组件、修改配置、甚至跑一下看看有没有报错。
它不是给你一段代码让你自己贴，而是直接帮你把活干了。 当然，每一步它都会征求你的同意（权限系统），你保留完全的控制权。
特质二：它能"记住"你的项目
通过后面要讲的 CLAUDE.md 文件（第 3 篇），你可以把项目的架构、编码规范、技术栈信息写进去。Claude Code 每次启动都会自动读取这个文件。
结果就是：你不需要每次都解释"我们用 TypeScript 严格模式""组件要用函数式声明""提交信息要用英文"这些废话。它打开项目就知道该怎么干活。
这跟你带一个新同事是完全不同的体验——你只需要写一次"新人入职手册"，以后它每天上班都带着这份手册来。
特质三：可编程，可自动化
这是 Claude Code 最深层的杀手锏，也是它与所有 IDE 内置 AI 的根本区别。
后面的文章会详细展开，这里先给你一个画面：
code┌──────────────────────────────────────────────────────┐
│ Claude Code 能做但 Cursor 做不到的事 │
├──────────────────────────────────────────────────────┤
│ │
│ 场景一：每天凌晨自动扫描代码仓库，生成质量报告 │
│ 场景二：每个 PR 提交后自动做 AI 代码审查 │
│ 场景三：用 TypeScript SDK 构建自定义开发工具 │
│ 场景四：多个 AI 子代理并行工作，各司其职 │
│ 场景五：连接 GitHub、数据库、文档系统，跨平台协作 │
│ │
│ 关键词：脚本化、SDK、子代理、MCP、Hooks、Plugins │
│ → 这些都是本系列后续文章的重点内容 │
│ │
└──────────────────────────────────────────────────────┘这些不是概念演示，而是你跟着本系列做完就能实际用上的东西。
几个新手常踩的坑，提前帮你避开
坑 1：在 HOME 目录启动 Claude Code
Claude Code 会扫描当前目录来理解你的项目。如果你在 ~ 目录启动，它要么读不到项目信息，要么试图扫描你整个硬盘。永远先 cd 到项目目录再启动。
坑 2：看到权限询问就烦了，直接关掉
开始阶段，Claude Code 每做一步都会问"可以吗？"——读文件问一次，写文件问一次，跑命令问一次。这确实有点烦。但别因此放弃，下一篇文章我会教你怎么配置权限，让它该问的问、不该问的自动通过。这是从"能用"到"好用"的关键跨越。
坑 3：把 Claude Code 当聊天机器人
有人启动 Claude Code 后开始问它"今天天气怎么样""给我讲个笑话"——拜托，这是一个开发工具，不是闲聊助手。它的设计就是围绕代码和开发任务的。你越具体、越技术化地描述需求，它的表现越好。
好的提示词：
分析 @src/app/api/posts/route.ts 这个 API 路由，检查错误处理是否完善，有没有遗漏的边界情况
不好的提示词：
帮我看看代码有没有问题
坑 4：不知道 claude doctor 这个命令
遇到任何安装或运行问题，先跑一次 claude doctor。它会自动诊断大多数常见问题，比手动排查快得多。
本篇小结
三个核心收获：
第一，Claude Code 不是"终端版 Cursor"。它是一个可编程的 AI 开发平台，终端界面是它的优势而不是劣势——因为终端意味着可脚本化、可编程、可集成到自动化流水线中。
第二，四个命令就能开始干活：claude 进入交互模式、claude -p 单次执行、claude -c 继续对话、claude -r 检查点恢复。先练熟这四个，其他用到了再学。
第三，@ 文件引用是你最强的提效武器。用 @文件路径 给 Claude 提供精确的上下文，比复制粘贴代码好用十倍。
通关检查清单
- Claude Code 安装成功，
claude --version有输出 - 认证完成，能正常启动交互模式
- 用 Claude Code 创建了 DevPulse 项目（或你自己的项目）
- 试过
@文件引用做代码审查 - 试过
claude -c继续上次对话 - 知道
claude doctor这个排障命令
全部打勾？恭喜通关第一关。
下篇预告
第 2 篇：Claude Code 通关手册（二）—— 权限系统搞明白，效率直接翻倍
下一篇我们要解决 Claude Code 最让新手抓狂的问题——"每一步都要问我同意不同意，烦死了！"
其实权限系统不是锁链，而是油门和刹车。学会调节，Claude Code 的速度感完全不一样。我会教你怎么配置"读操作自动通过、写操作手动确认"的黄金组合，让权限提示减少 80% 的同时保留完全的安全控制。
今日话题
你目前在用哪些 AI 编程工具？Cursor、Copilot、通义灵码、还是其他的？用下来感觉如何？评论区聊聊，看看大家的选择和体验。
如果这篇文章对你有帮助，欢迎点赞、在看、转发三连，让更多前端开发者看到这个系列。
关注「前端达人」，我们下篇见。
如果这篇对你有帮助，欢迎关注公众号「前端达人」，每周更新实用前端干货。
