# Claude Code 入门：从安装配置到造出首个交互式网页应用
## 概述
本教程面向**零基础**读者，目标是用最短路径让 Claude Code 在你的终端里跑起来，并亲手产出一个能打开、能点击、能计时的真实交互网页——一个**番茄工作法计时器**。学完你将掌握：三种安装方式的选择、首次登录认证、`settings.json` 与 `CLAUDE.md` 的最小配置、以及如何用一句自然语言让 AI 把空文件夹变成完整项目。适用人群：从未用过命令行 AI 编程工具、想入门 AI 辅助开发的学生与转行开发者。
## 前置条件
| 条目 | 要求 | 说明 |
|------|------|------|
| 操作系统 | macOS / Linux / Windows | Windows 推荐用 WSL2 或 Git Bash |
| 终端 | 能打开命令行 | macOS 自带 Terminal，Windows 用 PowerShell 或 WSL |
| Node.js | 可选，v18+ | 用 npm 安装方式时需要；用原生安装器则不需要 |
| 账号 | Anthropic 账号或 API Key | 用于认证计费 |
| 网络 | 能访问 Anthropic 服务 | 国内网络可能需要配置代理 |
> 💡 没装过 Node.js？没关系，本教程会先讲**原生安装器**，全程不碰 npm。
## 第一步：选对安装方式
Claude Code 在 2026 年提供三种主流安装途径，按"省事程度"排序：
```bash
# 方式 A：原生安装器（推荐零基础，无需 Node.js）
# macOS / Linux / WSL
curl -fsSL https://claude.ai/install.sh | bash
# Windows PowerShell
irm https://claude.ai/install.ps1 | iex
# 方式 B：npm 全局安装（已装 Node.js 的开发者最常用）
npm install -g @anthropic-ai/claude-code
# 方式 C：IDE 扩展（VS Code / JetBrains 插件市场搜索 "Claude Code"）
```
**预期结果**：终端输入 `claude --version` 能打印出版本号，例如 `2.0.x`，即代表安装成功。
**常见问题**：
- *`command not found: claude`*：环境变量未生效。原生安装器会写入 `~/.claude/local`，请确认该目录在 `PATH` 中，或重启终端。
- *`npm: command not found`*：没装 Node.js，改用方式 A 原生安装器。
- *`EACCES permission denied`*：npm 全局目录权限问题，推荐改用 npm 前缀配置或直接换原生安装器。
## 第二步：首次运行与认证
在任意空目录打开终端，输入：
```bash
claude
```
首次运行会进入交互式认证流程，提供三种登录方式：
```mermaid
flowchart TD
A[运行 claude] --> B{选择认证方式}
B -->|1. 浏览器登录| C[自动打开浏览器]
C --> D[在 claude.ai 确认授权]
D --> E[终端回显 Login successful]
B -->|2. Anthropic API Key| F[粘贴 sk-ant- 开头密钥]
F --> G[写入本地凭据]
B -->|3. 企业 SSO| H[输入组织提供的登录链接]
H --> E
E --> I[进入交互式对话 REPL]
```
**认证方式选择建议**：
| 方式 | 适合谁 | 优点 | 注意 |
|------|--------|------|------|
| 浏览器 OAuth 登录 | 个人订阅用户（Pro/Max） | 最省事，跟着引导点 | 需已登录 claude.ai |
| API Key | 用量计费 / 接入第三方 | 可控额度，可换供应商 | 密钥别提交到 git |
| 企业 SSO | 公司统一管理 | 合规、集中计费 | 需管理员提供链接 |
**预期结果**：认证成功后，终端会出现一个交互式输入框（REPL），光标闪烁等待你输入第一条指令。
**常见问题**：
- *浏览器没自动打开*：复制终端里显示的 URL，手动粘贴到浏览器。
- *登录卡在白屏*：检查网络代理设置，确认能访问 `claude.ai`。
- *额度查看*：认证后输入 `/cost` 可查看本次会话消耗，或在控制台后台查看订阅额度。
## 第三步：最小配置——让 AI 更懂你
Claude Code 的配置分三层，从全局到项目递进：
```mermaid
flowchart LR
U["用户全局
~/.claude/settings.json"] --> P["项目级
.claude/settings.json"]
P --> L["项目本地
.claude/settings.local.json"]
L -.覆盖优先级递增.-> U
```
对于零基础，只需先动两个文件：**全局 `settings.json`** 和 **项目 `CLAUDE.md`**。
### 3.1 全局配置
在终端运行一次，把允许的命令加入白名单，避免后续逐条放行：
```bash
# 让 claude 帮你打开配置编辑
claude config set --global preferredNotifPrompt false
```
或者手动编辑 `~/.claude/settings.json`，一个最小可用模板：
```json
{
"permissions": {
"allow": [
"Bash(ls:*)",
"Bash(cat:*)",
"Bash(mkdir:*)",
"Bash(node:*)",
"Bash(open:*)"
]
},
"model": "default"
}
```
> `permissions.allow` 数组里的命令后续执行不再弹确认框，**只放你信任的只读或安全命令**，写操作（如 `rm`、`git push`）建议保持默认询问。
### 3.2 项目记忆文件 CLAUDE.md
在项目根目录创建 `CLAUDE.md`，这是 Claude Code 的"长期记忆"。它会在每次对话开始时被自动读取。写一段简短说明即可：
```markdown
# 项目说明
本项目是一个番茄工作法计时器网页应用（单文件 HTML）。
## 技术栈
- 原生 HTML5 / CSS3 / JavaScript（无框架、无构建工具）
- 单文件 index.html，双击即可在浏览器打开
## 约定
- 所有 UI 文案使用中文
- 配色：主色 #FF6347（番茄红），背景 #FFF8F0
- 代码注释用中文，变量名用英文
```
**预期结果**：之后每次在该目录运行 `claude`，AI 都会"记住"这些约定，生成的代码自动符合你的偏好。
## 第四步：用一句话造出第一个项目
### 4.1 创建工作目录
```bash
mkdir ~/pomodoro && cd ~/pomodoro
```
### 4.2 写好 CLAUDE.md（参考第三步），然后启动 Claude Code
```bash
claude
```
### 4.3 输入第一条"魔法指令"
在 REPL 里粘贴下面这段提示词：
```
请在当前目录创建一个番茄工作法计时器的网页应用 index.html，要求：
1. 单文件，包含 HTML+CSS+JS，双击即可在浏览器打开
2. 顶部一个 25:00 的倒计时大字号显示
3. 三个按钮：开始、暂停、重置
4. 计时归零时弹窗提示"休息一下吧"
5. 下方记录今天完成的番茄数
6. 整体居中，番茄红主色，圆角卡片风格
请直接生成完整可运行的代码。
```
**预期结果**：Claude Code 会自动调用 `Write` 工具创建 `index.html`，并在终端显示文件创建进度。完成后你可以看到它简要说明做了什么。
### 4.4 打开看效果
```bash
# macOS
open index.html
# Linux
xdg-open index.html
# Windows
start index.html
```
浏览器里应出现一个居中的番茄红卡片，25:00 倒计时，三个按钮可点击。点"开始"开始倒计时，归零弹窗。
## 实战案例：番茄钟完整代码
下面是 Claude Code 会帮你生成的 `index.html` 完整实现（也可作为验收参考）：
```html
番茄钟 · 专注计时器
🍅 番茄工作法计时器
25:00
今天已完成 0 个番茄
```
### 验收清单
- [ ] 双击 `index.html` 浏览器打开，显示 25:00
- [ ] 点"开始"，倒计时每秒减一
- [ ] 点"暂停"，倒计时停止
- [ ] 点"重置"，回到 25:00
- [ ] （可加速测试）把 `TOTAL` 临时改成 `3`，验证归零弹窗与番茄数 +1
### 进阶练习（留给你的作业）
回到 Claude Code，用一句话继续让它增强：
```
给番茄钟增加：
1. 工作 25 分钟和休息 5 分钟自动切换，循环往复
2. 顶部进度条显示当前番茄的剩余比例
3. 把"今天完成的番茄数"用 localStorage 持久化，刷新不丢
```
这正是 Claude Code 的核心价值：**用自然语言持续迭代一个真实项目**，而不是每次从零写代码。
## 全流程工作流
```mermaid
flowchart TD
A[1. 安装 claude
原生安装器/npm] --> B[2. 终端运行 claude
完成认证]
B --> C[3. 写 CLAUDE.md
告诉 AI 项目约定]
C --> D[4. 输入自然语言需求
一句话建项目]
D --> E[5. Claude 自动创建文件
index.html]
E --> F[6. 浏览器打开验收]
F --> G{满意？}
G -->|否| H[再用一句话提需求迭代]
H --> F
G -->|是| I[🎉 第一个 AI 辅助项目完成]
```
## 延伸阅读
1. **官方快速入门** — `code.claude.com/docs/en/quickstart`，权威的第一手安装与上手指南
2. **CLI 命令参考** — `code.claude.com/docs/en/cli-reference`，所有命令与参数完整清单
3. **CLAUDE.md 记忆机制** — 深入了解项目记忆如何让 AI 持续理解你的代码库
4. **权限配置详解** — 学会用 `settings.json` 精细控制 AI 能执行哪些命令
5. **VS Code 扩展** — 把终端体验搬进编辑器，实现边写边问
## 训练营适用性评估
| 维度 | 评估 |
|------|------|
| 适合训练营类型 | AI 编程入门营、前端零基础启蒙营、转行开发者速成营 |
| 学员基础要求 | 能打开终端即可，无编程基础友好 |
| 建议教学时长 | **1.5 小时**：安装认证 30 分钟 + 配置讲解 20 分钟 + 实战造番茄钟 40 分钟 |
| 学员产出 | 每人一个可分享的番茄钟网页，成就感强 |
| 衔接下一课 | 可自然过渡到"多文件项目""MCP 工具""自动化钩子"等进阶主题 |
| 注意事项 | 课堂需提前测试网络对 Anthropic 服务的可达性；备好代理方案 |
## 参考来源
1. [Quickstart - Claude Code Docs](https://code.claude.com/docs/en/quickstart) — Anthropic 官方快速入门，本文安装与认证流程的权威依据
2. [How to Install Claude Code: Complete Setup Guide (2026)](https://www.nxcode.io/resources/news/install-claude-code-setup-guide-2026) — 2026 年最新安装指南，涵盖系统要求与 API Key 配置
3. [Claude Code Tutorial for Beginners 2026](https://dev.to/ayyazzafar/claude-code-tutorial-for-beginners-2026-from-installation-to-building-your-first-project-1lma) — 从安装到首个项目的完整新手教程，本文实战环节参考其结构
4. [CLI reference - Claude Code Docs](https://code.claude.com/docs/en/cli-reference) — 命令行参数完整参考，配置与认证方式的官方说明
5. [Install Claude Code CLI: 5-Minute Setup Guide (2026)](https://blakecrosley.com/blog/claude-code-quickstart) — 五分钟快速配置，涵盖 CLAUDE.md 与权限设置要点
> [!tip] 51学通信知识星球
> **星主：爱卫生**（微信：gprshome201101）——公众号「51学通信」创办者，19 年通信行业运维与讲师经验，著有《GPRS网络信令实例详解》《EPC原理与实践》《5G核心网原理与实践》三本纸质书（各大电商平台有售）。
> **星球定位**：深耕 5G 核心网、IMS、NFV/AI、云原生等 ICT 领域，主打运维岗位与信令分析。
> **当前规模**：5200 篇主题 / 990 个回答，198 元/年。
> **加入福利**：加入星球后请加爱卫生微信，拉您进知识星球年度陪伴与答疑群——不限量回复您的各种问题，另有群内分享。
> **AI 加持**：51学通信知识星球已作为 skill 接入 WorkBuddy，使用 deepseek-4-flash 在海量星球帖子中精准找贴、找视频、找 FAQ 和案例，做总结、找文档和 PPT 等场景全覆盖。
