Claude Code 是 Anthropic 官方推出的命令行 AI 编程助手，可以直接在终端中与 Claude 对话，帮助你完成代码编写、调试、重构等任务。本教程带你在 Windows 系统上从零开始，快速上手 Claude CLI。

---

一、环境准备

在安装 Claude CLI 之前，需要确保你的系统满足以下条件：

• Node.js：版本 18 及以上
• npm：包管理工具（随 Node.js 一同安装）
• 操作系统：Windows 10 / Windows 11
• 终端：推荐使用 PowerShell 5.1+ 或 Windows Terminal
• 网络：能正常访问 Anthropic API,如果有自备的公益API也行，例如anyrouter

安装 Node.js

前往 nodejs.org 下载最新 LTS 版本的 Windows 安装包（.msi），按向导完成安装，安装时勾选"自动安装必要工具"选项。

安装完成后，打开 PowerShell 验证版本：

node --version
# 输出示例：v24.14.0

npm --version
# 输出示例：11.9.0

---

二、安装 Claude CLI

打开 PowerShell（以管理员身份运行），执行全局安装命令：

npm install -g @anthropic-ai/claude-code

提示：如果安装时报权限错误，请右键点击 PowerShell 选择"以管理员身份运行"后重试。

安装完成后，验证安装是否成功：

claude --version

更新到最新版本

npm update -g @anthropic-ai/claude-code

解决 PATH 问题

如果提示 claude 不是可识别的命令，需要将 npm 全局包路径加入系统 PATH：

# 查看 npm 全局包安装路径
npm config get prefix

将输出的路径（如 C:\Users\你的用户名\AppData\Roaming\npm）添加到系统环境变量 PATH 中：

1. 右键"此电脑" → "属性" → "高级系统设置" → "环境变量"
2. 在"用户变量"中找到 Path，点击"编辑"
3. 点击"新建"，粘贴上述路径
4. 确定保存后，重新打开 PowerShell 使其生效

---

三、配置 API Key

Claude CLI 需要 Anthropic API Key 才能正常工作。

获取 API Key

1. 访问 console.anthropic.com
2. 注册或登录账号
3. 进入 API Keys 页面
4. 点击 Create Key 生成新的 API Key

设置环境变量（PowerShell）

临时设置（仅当前会话有效）：

$env:ANTHROPIC_API_KEY = "sk-ant-xxxxxxxxxxxxxxxx"

永久设置（推荐）：

方法一：通过 PowerShell 命令写入用户环境变量：

[System.Environment]::SetEnvironmentVariable("ANTHROPIC_API_KEY", "sk-ant-xxxxxxxxxxxxxxxx", "User")

方法二：通过系统界面设置：

1. 右键"此电脑" → "属性" → "高级系统设置" → "环境变量"
2. 在"用户变量"区域点击"新建"
3. 变量名填写 ANTHROPIC_API_KEY，变量值填写你的 API Key
4. 确定保存，重新打开 PowerShell 使其生效

验证环境变量已生效：

echo $env:ANTHROPIC_API_KEY

---

四、基础使用

启动交互模式

在项目目录下打开 PowerShell，运行 claude，进入交互式对话：

cd C:\Users\你的用户名\projects\your-project
claude

进入后，你会看到提示符，可以直接输入问题或指令。

单次查询模式

使用 -p 参数执行一次性查询：

claude -p "解释这个项目的目录结构"

处理文件

让 Claude 分析或修改特定文件：

claude -p "审查 src/index.js 中的代码，找出潜在的 bug"

---

五、核心功能演示

代码生成

> 用 Python 写一个读取 CSV 文件并计算每列平均值的脚本

代码解释

> 解释 @src/utils/parser.ts 这个文件的作用

代码重构

> 重构 @components/Button.jsx，将 class 组件改为函数组件，并添加 TypeScript 类型

调试协助

> 我的应用报错：TypeError: Cannot read property 'map' of undefined，帮我分析原因

生成测试

> 为 @src/api/user.js 中的所有函数生成单元测试

---

六、常用命令与快捷键

操作	命令 / 快捷键
启动 Claude	claude
单次查询	claude -p "问题"
查看帮助	claude --help
清空对话	/clear
退出	/exit 或 Ctrl+C
查看历史	/history

常用 Slash 命令

• /help — 查看所有可用命令
• /clear — 清除当前对话上下文
• /compact — 压缩对话历史以节省 Token
• /model — 切换使用的模型
• /cost — 查看本次会话的 Token 消耗

---

七、项目上下文管理

CLAUDE.md 文件

在项目根目录创建 CLAUDE.md 文件，Claude 会自动读取其中的内容作为项目背景：

# 项目说明

这是一个 React + TypeScript 的电商平台前端项目。

## 技术栈
- React 18
- TypeScript 5
- Tailwind CSS
- Zustand 状态管理

## 编码规范
- 使用函数组件和 Hooks
- 组件文件使用 PascalCase 命名
- 工具函数使用 camelCase 命名

在 PowerShell 中快速创建该文件：

New-Item -Path "CLAUDE.md" -ItemType File
notepad CLAUDE.md

引用文件

在对话中使用 @文件路径 引用具体文件：

> 参考 @src/components/Card.tsx 的风格，创建一个新的 Modal 组件

---

八、高级配置

配置文件

Claude CLI 支持通过配置文件自定义行为，配置文件位于：

• 全局：C:\Users\你的用户名\.claude\settings.json
• 项目：.claude\settings.json

在 PowerShell 中查看全局配置目录：

explorer "$env:USERPROFILE\.claude"

示例配置：

{
  "model": "claude-opus-4-6",
  "theme": "dark",
  "autoApprove": false
}

权限模式

Claude CLI 有三种权限模式：

• 默认模式：每次文件修改都需要用户确认
• 自动批准：--dangerously-skip-permissions 自动执行所有操作（谨慎使用）
• 只读模式：仅读取文件，不做修改

---

九、最佳实践

1. 使用 Windows Terminal：比默认 PowerShell 窗口体验更好，支持多标签和彩色输出
2. 始终在项目根目录启动：这样 Claude 能更好地理解项目结构
3. 编写详细的 CLAUDE.md：提供技术栈、编码规范等背景信息
4. 明确描述需求：越具体的指令，生成的结果越准确
5. 分步执行复杂任务：将大任务拆分为小步骤，逐一确认
6. 定期使用 /compact：长对话时压缩上下文，避免 Token 超限

---

十、常见问题

Q: 提示 claude 不是内部或外部命令？

检查 npm 全局包路径是否在 PATH 中，参考"安装 Claude CLI"章节中的 PATH 配置步骤。

# 查看 npm 全局包路径
npm config get prefix

Q: PowerShell 提示脚本执行被禁止？

以管理员身份运行 PowerShell，执行以下命令允许本地脚本运行：

Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

Q: API 请求失败，返回 401 错误？

检查 ANTHROPIC_API_KEY 环境变量是否正确设置，或 Key 是否已过期：

echo $env:ANTHROPIC_API_KEY

Q: 响应速度慢？

可以切换到更快的模型，如 claude-haiku-4-5：

/model claude-haiku-4-5-20251001

---

总结

Claude CLI 是一个强大的 AI 编程助手，将 Claude 的能力无缝集成到你的开发工作流中。通过本教程，你已经掌握了在 Windows 上从安装配置到日常使用的完整流程。建议在实际项目中多加练习，充分利用 Claude 的能力提升开发效率。

更多文档请参考官方文档：docs.anthropic.com/claude-code

如果你喜欢本教程，记得点赞+收藏！关注我获取更多AI相关干货

一、搭建舞台——“三剑客”的诞生

在 3D 世界里，所有的表演都需要一个舞台。Three.js 遵循“三剑客”原则：场景、相机、渲染器。

在你的代码开头，我们看到了这样的设定：

// 1. 场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x222222);

// 2. 相机
const camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 40;

// 3. 渲染器
const renderer = new THREE.WebGLRenderer({ antialias: true });
const viewContainer = document.getElementById('view');
renderer.setSize(viewContainer.clientWidth, viewContainer.clientHeight);
viewContainer.appendChild(renderer.domElement);

解析：

1. 场景：这就好比是一个空荡荡的剧院舞台。我们把它涂成了深灰色 (0x222222)，方便看清演员。
2. 相机：观众的眼睛。这里用的是 PerspectiveCamera（透视相机）。
   • 40 是视野角度（FOV），就像你睁大眼睛还是眯着眼睛看。
   • window.innerWidth / window.innerHeight 是长宽比，保证画面不变形。
   • camera.position.z = 40：这一步很关键！默认情况下，物体在坐标原点 (0,0,0)，相机也在原点。如果你不移开相机，你就跟物体“贴脸”了，什么也看不见。我们把相机往后拉 40 米，就能看清全貌了。
3. 渲染器：剧院的灯光和特效组。它负责把脑海中的画面画到屏幕上。
   • { antialias: true }：开启了抗锯齿，让边缘光滑，不再有毛刺。

---

二、点亮世界——没有光，一切都是黑的

如果你直接把物体放进去，可能会发现一片漆黑。为什么？因为在 3D 世界里，除了特殊的“基础材质”，大多数材质都需要光才能被看见。

代码里添加了两个光源：

{
    const light = new THREE.DirectionalLight(0xFFFFFF, 1);
    light.position.set(-1, 2, 4);
    scene.add(light);
}
// ... 还有一个方向相反的光

这里用的是 平行光，模拟太阳光。

• 第一盏灯：位置在左上方 (-1, 2, 4)，负责照亮物体的正面。
• 第二盏灯：位置在右下方 (1, -2, -4)，负责照亮物体的背面或暗部。

为什么要两盏灯？ 这是一种低成本的“补光”技巧，防止物体背光面死黑一片，让立体感更强。

---

三、万物之源——几何体与材质

在 3D 世界里，一个物体 = 几何体 + 材质。

• 几何体：骨架，决定了形状（是方的、圆的，还是扭曲的）。
• 材质：皮肤，决定了外观（是金属的、塑料的，还是半透明的）。

代码中定义了一个 primitives 对象，里面藏着 20 多种不同的几何体生成函数。让我们挑几个常用模型进行分析：

1. 基础款：方块与球体

'BoxGeometry': () => {
    const width = 8, height = 8, depth = 8;
    addSolidGeometry(new THREE.BoxGeometry(width, height, depth));
},
'SphereGeometry': () => {
    // ...
    addSolidGeometry(new THREE.SphereGeometry(radius, widthSegments, heightSegments));
},

这是最基础的构建模块。BoxGeometry 就像捏泥人时的方块，SphereGeometry 则是球体。注意 widthSegments 参数，它决定了球体的精细度——段数越多，球越圆，但计算量也越大。

2. 进阶款：挤压与车削

这可是把 2D 变成 3D 的魔法！

• ExtrudeGeometry（挤压几何体）： 代码里画了一个爱心形状的 2D 路径，然后给它一个厚度，它就变成了一个 3D 的爱心。

  'ExtrudeGeometry': () => {
      const shape = new THREE.Shape();
      // ... 画 2D 路径 ...
      const extrudeSettings = { depth: 2, bevelEnabled: true, ... };
      addSolidGeometry(new THREE.ExtrudeGeometry(shape, extrudeSettings));
  },
  

  想象一下，你用饼干模具在面团上按了一下，这就是 ExtrudeGeometry 做的事。

• LatheGeometry（车削几何体）： 这就像陶艺转盘。你定义好一个侧面的轮廓线，它旋转一圈就变成了一个罐子。

  'LatheGeometry': () => {
      const points = []; // 一系列二维点
      // ...
      addSolidGeometry(new THREE.LatheGeometry(points));
  },
  

3. 数学之美：参数化几何体与克莱因瓶

代码里最“不明觉厉”的部分来了：

function klein(v, u, target) {
    // ... 一堆复杂的数学公式 ...
}

'ParametricGeometry': () => {
    addSolidGeometry(new ParametricGeometry(klein, slices, stacks));
},

ParametricGeometry 允许你用数学公式来定义形状。这里的 klein 函数生成了一个著名的数学模型——克莱因瓶。它是一个没有“内”和“外”之分的奇怪瓶子。对于初学者，你只需要知道：只要你能写出 x, y, z 的方程，Three.js 就能帮你画出模型。

4. 文字 3D 化

'TextGeometry': () => {
    const loader = new FontLoader();
    const font = loader.parse(local_font);
    const textGeometry = new TextGeometry('three.js', { font, size: 3, ... });
    // ...
},

想让网页显示立体的 "Hello World"？你需要加载字体文件，然后 TextGeometry 会帮你把文字变成 3D 模型，甚至还能加倒角让文字更有质感。

---

每种基础元件的详细介绍会在后续文章介绍

核心代码与完整示例：     my-three-app

总结

如果你喜欢本教程，记得点赞+收藏！关注我获取更多Three.js开发干货