Claude Code 从入门到实战（一）：安装、登录与第一个Vue项目

行走的陀螺仪2026-11-02 9:51

本文是 《Claude Code 从入门到高级实战》系列 第 1 篇（共 4 篇）。系列目录：①环境搭建与基础交互；②终端命令、规划模式、多模态与上下文管理；③Hooks、Skills、SubAgents 与 Plugins 扩展定制；④串联实战、常见误区排查与学习路线。
阅读对象：具有基本终端和 Git 知识，希望把 Claude Code 用到真实开发项目中的工程师。

环境说明：以 Windows 11 + PowerShell + Git for Windows + Node.js 项目为主要示例；macOS、Linux、WSL 的差异会特别标注。

重要说明 ：Claude Code 更新频繁，部分功能的显示名称、权限模式、快捷键及可用性会随版本、终端、账户和组织策略变化。运行前以 claude --version、claude --help、会话内 /help 和本系列末篇的官方文档为准。
一篇面向开发者的 Claude Code 系统教程：从第一次启动，到复杂任务规划、终端命令、回滚、图片与 Figma MCP，再到 Hooks、Skills、SubAgents 和 Plugins。

阅读对象：具有基本终端和 Git 知识，希望把 Claude Code 用到真实开发项目中的工程师。

环境说明：以 Windows 11 + PowerShell + Git for Windows + Node.js 项目为主要示例；macOS、Linux、WSL 的差异会特别标注。

重要说明 ：Claude Code 更新频繁，部分功能的显示名称、权限模式、快捷键及可用性会随版本、终端、账户和组织策略变化。运行前以 claude --version、claude --help、会话内 /help 和本文末尾的官方文档为准。

导读：先认识 Claude Code 的工作方式

Claude Code 是一种可以在开发环境中执行任务的编码 Agent，而不只是回答代码问题的聊天机器人。它能在获得相应权限后，读取仓库、搜索代码、修改文件、执行命令、运行测试、分析结果，并根据反馈继续迭代。

一个典型的任务循环是：
#mermaid-svg-8Dr0zhJWvSOKrT3x{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}@keyframes edge-animation-frame{from{stroke-dashoffset:0;}}@keyframes dash{to{stroke-dashoffset:0;}}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-animation-slow{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 50s linear infinite;stroke-linecap:round;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-animation-fast{stroke-dasharray:9,5!important;stroke-dashoffset:900;animation:dash 20s linear infinite;stroke-linecap:round;}#mermaid-svg-8Dr0zhJWvSOKrT3x .error-icon{fill:#552222;}#mermaid-svg-8Dr0zhJWvSOKrT3x .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-thickness-normal{stroke-width:1px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-thickness-invisible{stroke-width:0;fill:none;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-8Dr0zhJWvSOKrT3x .marker{fill:#333333;stroke:#333333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .marker.cross{stroke:#333333;}#mermaid-svg-8Dr0zhJWvSOKrT3x svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-8Dr0zhJWvSOKrT3x p{margin:0;}#mermaid-svg-8Dr0zhJWvSOKrT3x .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster-label text{fill:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster-label span{color:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster-label span p{background-color:transparent;}#mermaid-svg-8Dr0zhJWvSOKrT3x .label text,#mermaid-svg-8Dr0zhJWvSOKrT3x span{fill:#333;color:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .node rect,#mermaid-svg-8Dr0zhJWvSOKrT3x .node circle,#mermaid-svg-8Dr0zhJWvSOKrT3x .node ellipse,#mermaid-svg-8Dr0zhJWvSOKrT3x .node polygon,#mermaid-svg-8Dr0zhJWvSOKrT3x .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .rough-node .label text,#mermaid-svg-8Dr0zhJWvSOKrT3x .node .label text,#mermaid-svg-8Dr0zhJWvSOKrT3x .image-shape .label,#mermaid-svg-8Dr0zhJWvSOKrT3x .icon-shape .label{text-anchor:middle;}#mermaid-svg-8Dr0zhJWvSOKrT3x .node .katex path{fill:#000;stroke:#000;stroke-width:1px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .rough-node .label,#mermaid-svg-8Dr0zhJWvSOKrT3x .node .label,#mermaid-svg-8Dr0zhJWvSOKrT3x .image-shape .label,#mermaid-svg-8Dr0zhJWvSOKrT3x .icon-shape .label{text-align:center;}#mermaid-svg-8Dr0zhJWvSOKrT3x .node.clickable{cursor:pointer;}#mermaid-svg-8Dr0zhJWvSOKrT3x .root .anchor path{fill:#333333!important;stroke-width:0;stroke:#333333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .arrowheadPath{fill:#333333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edgeLabel{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8Dr0zhJWvSOKrT3x .edgeLabel p{background-color:rgba(232,232,232, 0.8);}#mermaid-svg-8Dr0zhJWvSOKrT3x .edgeLabel rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8Dr0zhJWvSOKrT3x .labelBkg{background-color:rgba(232, 232, 232, 0.5);}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster text{fill:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x .cluster span{color:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-8Dr0zhJWvSOKrT3x .flowchartTitleText{text-anchor:middle;font-size:18px;fill:#333;}#mermaid-svg-8Dr0zhJWvSOKrT3x rect.text{fill:none;stroke-width:0;}#mermaid-svg-8Dr0zhJWvSOKrT3x .icon-shape,#mermaid-svg-8Dr0zhJWvSOKrT3x .image-shape{background-color:rgba(232,232,232, 0.8);text-align:center;}#mermaid-svg-8Dr0zhJWvSOKrT3x .icon-shape p,#mermaid-svg-8Dr0zhJWvSOKrT3x .image-shape p{background-color:rgba(232,232,232, 0.8);padding:2px;}#mermaid-svg-8Dr0zhJWvSOKrT3x .icon-shape .label rect,#mermaid-svg-8Dr0zhJWvSOKrT3x .image-shape .label rect{opacity:0.5;background-color:rgba(232,232,232, 0.8);fill:rgba(232,232,232, 0.8);}#mermaid-svg-8Dr0zhJWvSOKrT3x .label-icon{display:inline-block;height:1em;overflow:visible;vertical-align:-0.125em;}#mermaid-svg-8Dr0zhJWvSOKrT3x .node .label-icon path{fill:currentColor;stroke:revert;stroke-width:revert;}#mermaid-svg-8Dr0zhJWvSOKrT3x :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;} 是
否
允许
拒绝
否
是
开发者提出目标和约束
Claude 理解需求并收集上下文
需要先规划吗?
Plan Mode: 调研与形成方案
开发者确认方案
选择合适工具
权限与安全规则
读取文件 / 编辑代码 / 调用 MCP / 执行命令
调整方案或请求授权
检查输出、测试与 Diff
达到验收标准?
总结修改与风险，交付结果

这里需要先区分几个概念：

概念 解决的问题 代表形式
会话（Session） 保存当前任务的对话与执行过程 claude、/resume
权限模式（Permission Mode） 决定工具调用是否需要人工批准 Manual、Auto、Plan、Accept Edits
工具（Tool） 执行具体动作 读取文件、编辑文件、Bash、MCP Tool
上下文（Context） 模型本轮可参考的信息 对话、文件、工具结果、项目指令
项目指令 让 Claude 长期遵循项目约定 CLAUDE.md
Hook 在特定事件确定性地运行脚本 PreToolUse、PostToolUse
Skill 按需加载的可复用工作方法 SKILL.md
SubAgent 独立上下文中的专职执行单元 .claude/agents/reviewer.md
MCP Server 为 Claude 提供外部系统的标准工具接口 Figma、GitHub、数据库
Plugin 打包、分发和安装扩展能力 Skills + Agents + Hooks + MCP

建议的学习路线：先学会安全地让 Claude 完成一个小任务，再学习复杂任务规划和状态恢复，最后学习扩展机制。不要把"无需人工批准"误认为"运行结果一定正确"。

第一部分：环境搭建与基础交互

1. 安装 Claude Code

1.1 准备工作

安装前确认以下条件：

  1. 操作系统受 Claude Code 支持，Windows 11 可以使用原生安装方式。
  2. 有可访问 Claude 服务的网络环境。
  3. 有符合 Claude Code 登录或 API 计费要求的账户或组织授权。
  4. 建议安装 Git for Windows，方便 Git 操作与 Bash 工具执行；也可以选择 WSL。
  5. 建议安装 VS Code、Git 与项目使用的包管理器，例如 pnpm。

Node.js 并非使用原生安装器的前置条件。 如果你开发 Node/Vue/React 项目，Node.js 仍是项目开发本身需要的工具。

1.2 Windows 11：推荐原生安装

在 PowerShell 中运行：

powershell 复制代码 
irm https://claude.ai/install.ps1 | iex

安装完成后重新打开终端，检查：

powershell 复制代码 
claude --version
claude --help
claude doctor

也可以根据官方安装说明使用 WinGet；macOS、Linux、WSL 的常见原生安装命令为：

bash 复制代码 
curl -fsSL https://claude.ai/install.sh | bash

注意：irm 是 PowerShell 的命令别名；不要在 CMD 中直接运行。原生安装会自动更新，claude update 可以用于手动更新。

1.3 选择原生 Windows 还是 WSL？

方案 优点 需要注意
Windows 原生 与 VS Code、Windows 目录和 PowerShell 集成直观 路径、脚本和终端转义与 Linux 有差异
Windows + Git Bash 兼顾 Windows 文件系统与 Bash 开发习惯 需要 Git for Windows
WSL2 Shell、Docker、Linux 命令和 CI 环境更接近服务器 Windows/WSL 跨文件系统、路径和网络需要额外理解
macOS / Linux Unix 工具链一致性较好 使用相应包管理器和权限体系

对于普通 Windows 前端项目，原生 Windows + Git for Windows + VS Code 通常足够。如果项目大量依赖 Linux 工具链、Shell 脚本或容器，再考虑把工作目录放在 WSL 文件系统内。

1.4 进入项目启动

powershell 复制代码 
cd D:\workspace\projects\my-vue-app
claude

启动前先确认你当前位于正确项目根目录 。不要直接在 C:\ 或包含多个敏感项目的大目录中随意启动高权限会话。

2. 登录与授权

2.1 常见认证方式

Claude Code 可以通过支持的 Claude 订阅账户、Anthropic Console API 计费账户，或企业配置的云平台/网关方式接入。登录 Claude Code 不等同于免费无限使用：具体配额、成本和功能取决于所用账户及组织方案。

首次运行 claude，通常会引导打开浏览器完成登录。也可以主动运行：

powershell 复制代码 
claude auth login
claude auth status

在 Claude Code 交互会话内还可以运行：

text 复制代码 
/login
/status

需要切换登录方式或排查授权时，可先查看 claude auth status，不要直接删除整套配置目录。

2.2 认证、工具权限和操作系统权限不是一回事

  • 账户认证：你是谁、以什么计费方式使用模型。
  • 工具权限：是否允许 Claude 编辑某个文件、运行某条命令、连接某个 MCP 工具。
  • 系统权限：Claude Code 进程在当前 Windows 用户、WSL 或容器中实际拥有什么文件与网络权限。

例如，登录成功不代表默认允许执行 git push、删除文件或读取任意目录；反过来，即使在 Claude Code 中批准了命令，操作系统 ACL 依然可能拒绝访问。

2.3 首次启动建议

text 复制代码 
/status         # 检查版本、账户、模型等信息
/model          # 查看或切换可用模型
/permissions    # 查看工具授权规则
/help           # 查看当前版本可用命令

如果是在公司代码仓库使用，先明确代码、日志、截图、数据是否允许被传给模型或第三方 MCP 服务，并遵守组织的安全策略。

3. 第一个实战问题：让 Claude 理解一个 Vue 项目

不建议第一次就说"帮我把整个项目重构一遍"。更好的做法是先建立可验证、影响范围小的任务。

3.1 第一步：只读调研

在项目根目录启动：

powershell 复制代码 
claude

发送以下提示词：

先不要修改任何文件。阅读 package.json、vite.config.ts、src/main.ts、路由配置和目录结构，说明这个项目的技术栈、应用启动流程、状态管理方式，以及你发现的三个最值得关注的工程风险。请附上对应文件路径。

你应当检查 Claude 是否做到：

  1. 给出真实文件路径，而不是猜测项目结构。
  2. 说明结论基于哪些文件或命令结果。
  3. 不修改代码。
  4. 区分已经验证的事实和推测。

3.2 第二步：一个小范围改动

先建立 Git 基线：

powershell 复制代码 
git status
git switch -c feat/claude-first-task

再输入：

请为登录按钮补充请求中的 loading 状态。只允许修改登录组件及相关测试。保持现有 API 和 i18n key 不变。完成后运行相关的类型检查或测试，并列出修改文件、验证结果和未解决的问题。

这条提示词包含了 目标、范围、约束、验收方式、交付格式，比"优化登录页面"更容易得到可靠结果。

3.3 第三步：人工验收

powershell 复制代码 
git diff --check
git diff
git status
pnpm exec vue-tsc --noEmit

具体检查命令以项目实际 package.json 为准。必要时在 Claude Code 内用 /diff 查看它生成的修改。

3.4 一个好提示词的模板

text 复制代码 
任务目标：要实现什么功能或修复什么问题。
背景：目前的行为、错误信息和预期行为。
范围：允许检查或修改哪些目录、模块和接口。
约束：保持哪些行为、类型和兼容性不变。
步骤：先调研/规划，再实现，再验证。
验收：需要运行哪些测试，哪些业务场景必须通过。
交付：列出文件、关键 Diff、测试结果、风险和未完成项。

4. 权限模式：默认、自动、规划，以及容易混淆的 Accept Edits

有的入门教程把 Claude Code 概括为"默认、自动、规划"三种模式，但当前的权限模型不止三种 。其中尤其要区分 Auto Mode 和 Auto Accept Edits。

模式 配置值 核心行为 推荐场景
默认 / Manual default 常规危险或写入操作会请求确认 首次接触、陌生仓库
Auto Accept Edits acceptEdits 自动批准工作目录中的常规文件编辑；其他操作仍可能询问 已明确修改范围的开发任务
Plan Mode plan 以分析和规划为主，不修改源代码 架构设计、复杂重构
Auto Mode auto 利用后台分类器评估工具行为，减少常规权限提示 具备该功能且信任执行环境时
Don't Ask dontAsk 未预批准的操作直接拒绝，不弹确认 严格受控的脚本任务
Bypass Permissions bypassPermissions 跳过常规权限询问，风险很高 仅隔离的临时容器/虚拟机

Auto Mode 可能受账户、模型、功能开放范围和组织策略限制；不是每个用户都能在模式切换中看到。Auto Mode 不等于对任何操作无条件放行，也不能保证完全消除风险。

4.1 如何切换模式？

在交互式终端中，可以根据当前版本通过 Shift+Tab 循环切换可用模式，也可以使用：

text 复制代码 
/plan
/permissions

启动时指定规划模式：

powershell 复制代码 
claude --permission-mode plan

启动时指定接受编辑模式：

powershell 复制代码 
claude --permission-mode acceptEdits

模式切换的快捷键、菜单和文案会因终端与版本而不同，优先观察会话状态栏。

4.2 如何选择？

  • 不认识的仓库：先 Manual 或 Plan。
  • 需求很明确的小修改：Manual 或 Accept Edits。
  • 跨目录重构、数据库迁移、生产配置修改：先 Plan，再逐步授权。
  • CI/批量无人值守任务：需要预设允许/拒绝规则、沙箱与超时，不应仅靠一句"你要小心"。

4.3 一个有用的心智模型

权限模式决定 "Claude 能不能执行" ；提示词与 CLAUDE.md 决定 "Claude 倾向执行什么" ；测试和代码审查决定 "执行结果是否正确"。三者各司其职，不能互相替代。

相关推荐
梦曦i1 小时前
0.8.2 新增 backFallback 配置，无 tabbar 页返回无忧
前端·uni-app x
vipxieliang1 小时前
解构赋值与展开运算符：现代 JS 提效技巧
javascript
Amos_Web1 小时前
Rspack 源码解析（三十四）：rspack_hook 与宏系统如何用过程宏生成异步 Hook 与插件
前端
恋猫de小郭1 小时前
感人，Flutter 居然有了一个超实用提案，期待落地
android·前端·flutter
wordbaby1 小时前
为什么 Apifox 能调通，浏览器却报跨域？一次“CORS Error + 403”联调排坑实录
前端
2603_965896621 小时前
JavaScript 原型与原型链
开发语言·前端·javascript
Amos_Web1 小时前
通过 Rspack 源码学 Rust（四）：用 `Option<T>` 表达“查询可能没有结果”
前端
朋友圈自动点赞工具2 小时前
Ruby方法查找：对象不存方法
开发语言·前端·ruby·科技资讯
晓得迷路了2 小时前
栗子前端技术周刊第 152 期 - Rspack 2.3、TypeScript 7.1 Beta、Bun 1.4.4...
前端·javascript·css
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02历年考研数学一、数学二、数学三真题试卷及答案PDF03GitHub 镜像站点04如何新建文件夹？ 电脑新建文件夹的4种方法05几个好用的ip纯净度检测网站06苹果iPA游戏软件资源下载网站07蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接08昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10Dify：一站式AI应用开发平台全解析与Windows部署指南