<!-- title: 零基础造首个纪念日倒计时网页 -->

# Claude Code 零基础实战：在 Windows 上装通配好，并造出你的第一个纪念日倒计时网页

## 概述

本教程面向**从未用过命令行、也从未接触过 AI 编程工具**的零基础读者。你将学到三件事：第一，如何在 Windows 11 上用一行命令原生安装 Claude Code（无需 WSL、无需 Node.js）；第二，如何完成登录认证并做基础配置（设置文件、模型选择、项目记忆文件 CLAUDE.md）；第三，如何用"对话式编程"的方式，从一句自然语言描述开始，让 Claude Code 帮你生成一个可运行、可保存、带本地存储的**纪念日倒计时网页**——比如"距离结婚纪念日还有 87 天"。完成本教程后，你将拥有自己的第一个本地项目，并真正理解 AI 编程协作的基本循环。

## 前置条件

- **操作系统**：Windows 10 1809 及以上，推荐 Windows 11。Claude Code 同样支持 macOS 13+、Ubuntu 20.04+、Debian 10+、Alpine 3.19+，本教程以 Windows 原生路径为主线，其他系统命令差异会在对应步骤标注。
- **硬件**：4GB 以上内存即可，x64 或 ARM64 处理器。
- **网络**：需要稳定的互联网连接，且处于 Anthropic 支持的国家或地区。
- **账号**：Claude Code 需要 **Pro、Max、Team、Enterprise 或 Console（API）** 账号。**免费的 Claude.ai 计划不包含 Claude Code 访问权限**，这是新手最容易踩的第一个坑。
- **可选**：安装 [VS Code](https://code.visualstudio.com/) 编辑器，方便查看和微调生成的代码；安装 [Git for Windows](https://git-scm.com/downloads/win)（可选），它会让 Claude Code 拥有 Bash 工具能力。

> 一句话说明 Windows 上的两种安装路线：**原生安装**（在 PowerShell 里直接装）上手最快、不需要虚拟化；**WSL2 安装**（在 Linux 子系统里装）功能更全、支持沙箱执行命令。本教程选**原生路线**，因为它最适合零基础——少一层环境，少一层报错。

## 第一步：用一行命令原生安装 Claude Code

打开 **PowerShell**（在开始菜单搜索 "PowerShell"，点击打开即可，**不需要以管理员身份运行**）。你会看到形如 `PS C:\Users\你的名字>` 的提示符——前缀 `PS` 表示当前在 PowerShell 中。

把下面这行命令复制进去，回车：

```powershell
irm https://claude.ai/install.ps1 | iex
```

**这行命令在做什么**：`irm`（Invoke-RestMethod）从官方地址下载安装脚本，`| iex`（Invoke-Expression）立刻执行它。脚本会自动检测你的系统架构（x64 或 ARM64），下载对应版本的 Claude Code，并配置好环境变量。

**预期结果**：终端会打印下载和安装进度，结束后提示安装成功。整个过程通常不超过一分钟。

**如果你用的是 CMD 而不是 PowerShell**：CMD 没有 `irm` 命令，改用：

```batch
curl -fsSL https://claude.ai/install.cmd -o install.cmd && install.cmd && del install.cmd
```

> 小提示：如何判断自己当前在哪个终端？提示符带 `PS C:\` 前缀的是 PowerShell，只有 `C:\` 前缀的是 CMD。装错了命令会报 `'irm' is not recognized` 或 `The token '&&' is not a valid statement separator`——对照提示符换一条命令即可。

**其他安装方式**（任选其一，效果等价）：

- WinGet（Windows 自带包管理器）：`winget install Anthropic.ClaudeCode`
- Homebrew（macOS/Linux）：`brew install --cask claude-code`
- macOS/Linux/WSL 原生脚本：`curl -fsSL https://claude.ai/install.sh | bash`

注意：原生安装会**在后台自动更新**到最新版；而 WinGet、Homebrew 安装不会自动更新，需要偶尔手动执行 `winget upgrade Anthropic.ClaudeCode` 或 `brew upgrade claude-code`。

### 常见问题与解决

- **报错 `403` 或 `syntax error near unexpected token '<'`**：通常是网络代理拦截或下载被中断。尝试切换网络、关闭代理，或在官方排错页根据错误码对照解决方案。
- **报错"执行策略"相关（ExecutionPolicy）**：少数系统会阻止脚本运行。可临时用 `Set-ExecutionPolicy -Scope CurrentUser RemoteSigned` 放行，再重试安装。
- **杀毒软件拦截**：将 PowerShell 加入信任名单后重新运行安装命令。

## 第二步：验证安装并登录认证

安装完成后，**关闭并重新打开 PowerShell**（让环境变量生效），然后验证：

```powershell
claude --version
```

**预期结果**：打印类似 `2.x.x` 的版本号，说明命令已被系统识别。

如果想做一次更彻底的健康检查：

```powershell
claude doctor
```

它会逐项检查安装状态、更新情况、配置文件位置等，是一个"全身体检"命令，遇到任何疑难杂症都先跑它。

接下来登录认证。直接运行：

```powershell
claude
```

首次运行会弹出浏览器，引导你登录 Anthropic 账号。**用你的 Pro/Max/Team/Enterprise 或 Console 账号登录**。登录成功后，浏览器会提示"返回终端"，回到 PowerShell 你会看到 Claude Code 的交互界面（REPL），光标处可以输入消息。

### 常见问题与解决

- **登录后提示没有 Claude Code 权限**：99% 是用了免费 Claude.ai 账号。升级到 Pro/Max，或改用 Console（API key）账号。
- **浏览器没有自动弹出**：终端会打印一个链接，手动复制到浏览器打开即可。
- **公司网络拦截登录请求**：联系网管放行 Anthropic 相关域名，或参考官方网络配置文档。

## 第三步：认识工作界面——终端 REPL 与 VS Code 扩展

Claude Code 提供两种主要的交互入口，新手建议**两种都试一遍**，挑顺手的用。

### 入口 A：终端 REPL（最直接）

就在刚才登录后的界面里，直接用中文或英文打字对话即可。几个必须记住的斜杠命令：

- `/help` —— 查看所有命令
- `/clear` —— 清空当前对话上下文（开新任务前必用，避免旧上下文干扰）
- `/config` —— 打开配置菜单，可视化调整模型、主题等
- `/init` —— 在当前项目生成记忆文件 `CLAUDE.md`
- `/cost` —— 查看本次会话消耗
- `Ctrl + C` 两次 —— 退出 Claude Code

### 入口 B：VS Code 扩展（边看代码边对话，更适合做项目）

1. 在 VS Code 扩展市场搜索 **"Claude Code"** 并安装官方扩展。
2. 用 `Ctrl + Esc`（Mac 上是 `Cmd + Esc`）唤起 Claude 面板，或在侧边栏打开。
3. 扩展会自动复用你刚才在终端登录过的账号，无需重复登录。

做项目时，**推荐用 VS Code 扩展**：左边能实时看到 Claude 创建或修改了哪些文件，右边能直接和它对话，所见即所得。

## 第四步：基础配置——让 Claude 更懂你

配置分两层：**全局配置**（影响所有项目）和**项目配置**（只影响当前项目）。

### 4.1 用 `/config` 做基础设定

在 Claude Code 里输入 `/config`，会弹出可视化菜单。新手至少确认两件事：

- **模型**：默认通常是当前主力模型，零基础做小项目完全够用，保持默认即可。
- **主题**：浅色/深色，按喜好选。

### 4.2 项目记忆文件 CLAUDE.md

这是 Claude Code 的"长期记忆"。每个项目根目录放一个 `CLAUDE.md`，里面写清楚项目背景、技术栈、你的偏好，Claude 每次启动都会自动读取。

最简单的生成方式——在你的项目文件夹里运行：

```powershell
claude
# 进入交互界面后输入：
/init
```

Claude 会扫描当前目录，自动生成一份 `CLAUDE.md` 初稿，你再按需修改。例如本教程的项目可以这样写：

```markdown
# 纪念日倒计时网页

本项目是一个纯前端单页应用，用于显示距离若干重要日期的倒计时。

## 技术栈
- 单个 index.html，内联 CSS 和 JavaScript，无构建步骤
- 数据用浏览器 localStorage 本地保存，无需后端

## 编码偏好
- 中文界面、中文注释
- 配色温暖、移动端优先
- 代码清晰可读，初学者也能看懂
```

### 4.3 settings.json 进阶配置（可选）

Claude Code 的设置文件是 JSON 格式，分三个层级（优先级从高到低）：

- 项目本地：`.claude/settings.local.json`（不提交到 git）
- 项目共享：`.claude/settings.json`（团队共享）
- 用户全局：`~/.claude/settings.json`（所有项目生效）

一个常见的 Windows 全局配置示例（指定 Git Bash 路径、开启 PowerShell 工具）：

```json
{
  "env": {
    "CLAUDE_CODE_GIT_BASH_PATH": "C:\\Program Files\\Git\\bin\\bash.exe"
  }
}
```

> 小知识：在 Windows 原生环境下，如果装了 Git for Windows，Claude Code 会用 Git Bash 执行命令；如果没装，它会改用 PowerShell 工具执行命令。两者都能正常工作，新手不装 Git for Windows 也完全没问题。

## 第五步：创建第一个项目——纪念日倒计时网页

现在进入正题。先建一个项目文件夹并进入：

```powershell
mkdir countdown
cd countdown
```

在该目录下启动 Claude Code（如果用 VS Code 扩展，直接打开这个文件夹即可）。然后**用一句自然语言描述你要什么**，这是 AI 编程的核心动作——把需求讲清楚。

输入下面这段提示词（可以照抄，也可以改成你自己的纪念日）：

```
帮我做一个"纪念日倒计时"单页网页，要求：
1. 单个 index.html 文件，内联 CSS 和 JS，双击就能在浏览器打开，无需任何安装。
2. 顶部一个大标题"我们的纪念日"。
3. 默认显示三个倒计时卡片：结婚纪念日 2026-10-01、宝宝生日 2026-12-25、相识纪念日 2026-03-08。每个卡片显示事件名和"还有 X 天"，天数实时计算。
4. 页面提供一个"添加纪念日"表单，可以输入事件名和日期，点"添加"后新卡片出现在列表里。
5. 所有自定义的纪念日用 localStorage 保存，刷新页面不丢失。
6. 配色温暖（米色背景、暖橙色强调），移动端自适应。
7. 代码加中文注释，结构清晰，方便初学者阅读。
```

**预期结果**：Claude Code 会先简述它打算怎么做，然后创建 `index.html` 文件。你会看到它逐段写出 HTML 结构、CSS 样式、JavaScript 逻辑。完成后，在文件资源管理器里双击 `index.html`，浏览器会打开你的倒计时网页。

### 关键：让 Claude 自己运行和验证

Claude Code 不只是写代码，它还能**自己运行命令检查结果**。你可以说：

```
请用浏览器打开 index.html 看看效果，并检查有没有报错。
```

它会调用相应工具打开页面、读取控制台、把问题反馈回来并自我修正。这种"写→跑→改"的闭环，正是 AI 编程区别于纯代码补全的地方。

## 第六步：与 Claude 协作迭代

第一版跑起来后，继续用对话不断打磨。以下是几个典型的迭代指令，照着说就行：

- **美化**："卡片加上柔和的阴影和圆角，已过期的纪念日用灰色显示并标注'已度过 X 天'。"
- **交互增强**："给每个卡片加一个删除按钮，删除后同步更新 localStorage。"
- **数据导出**："加一个'导出 JSON'按钮，把所有纪念日下载成一个文件，方便备份。"
- **错误防御**："如果用户输入的日期格式不对或留空，给友好提示而不是崩溃。"

每一条指令后，Claude 会精准修改对应代码，其他部分保持不动。你只需刷新浏览器看效果。

经过几轮迭代，你的 `index.html` 大致会包含这些核心逻辑（示意片段）：

```javascript
// 计算距离目标日期还有多少天
function daysUntil(targetDateStr) {
  const target = new Date(targetDateStr + 'T00:00:00');
  const today = new Date();
  today.setHours(0, 0, 0, 0);          // 归零到当天零点，避免时分秒干扰
  const diff = target - today;
  return Math.ceil(diff / (1000 * 60 * 60 * 24));
}
```

注意 Claude 会主动解释"为什么要 `setHours(0,0,0,0)`"——这是它对零基础读者友好的地方，你可以随时追问"这一行为什么这么写"。

## 第七步：（可选）用 Git 管理你的项目

养成用 Git 管理版本的习惯，能随时回退。如果你装了 Git for Windows：

```powershell
git init
git add index.html CLAUDE.md
git commit -m "第一个纪念日倒计时网页"
```

之后每次大改前先 commit 一次，出问题随时 `git diff` 或 `git checkout` 回滚。

## 完整工作流示意

下面的流程图展示了从安装到交付的完整路径：

```text
flowchart TD
    A[准备 Pro/Max/Console 账号] --> B[PowerShell 原生安装]
    B --> C[claude --version 验证]
    C --> D[claude 登录认证]
    D --> E{选择交互入口}
    E --> F[终端 REPL]
    E --> G[VS Code 扩展]
    F --> H[创建项目文件夹]
    G --> H
    H --> I[/init 生成 CLAUDE.md]
    I --> J[自然语言描述需求]
    J --> K[Claude 生成 index.html]
    K --> L[浏览器打开验证]
    L --> M{效果满意?}
    M -->|否| N[对话迭代修改]
    N --> L
    M -->|是| O[Git 提交保存]
    O --> P[完成第一个项目]
```

## 常见问题与排错速查

| 现象 | 原因 | 解决 |
|------|------|------|
| `claude` 命令找不到 | 环境变量未生效 | 关闭重开 PowerShell；仍不行跑 `claude doctor` |
| 登录后无权限 | 用了免费 Claude.ai 账号 | 换 Pro/Max 或 Console（API）账号 |
| 代码乱码/中文方块 | 文件编码问题 | 让 Claude 用 UTF-8 重新保存文件 |
| 网页打开是空白 | JS 报错 | 按 F12 打开控制台，把报错贴给 Claude 让它修 |
| 命令执行被拦截 | 原生 Windows 无沙箱 | 关键操作让 Claude 先解释再执行，或改用 WSL2 |
| 上下文混乱、答非所问 | 旧对话干扰 | `/clear` 清空后重新描述任务 |

## 延伸阅读

- **官方快速入门**：Claude Code Quickstart 文档，手把手带你走完第一次会话。
- **终端入门指南**：官方 Terminal Guide，专为零基础讲解命令行基础。
- **CLAUDE.md 最佳实践**：研究如何写好项目记忆文件，让 Claude 越用越懂你。
- **权限与沙箱**：了解原生 Windows 与 WSL2 在安全执行上的差异，决定后续是否迁移到 WSL2。
- **Slash 命令全表**：掌握 `/help` 列出的全部命令，提升日常效率。

## 训练营适用性评估

- **适合的训练营类型**：编程零基础启蒙营、AI 工具入门营、非技术背景者的"AI 编程第一课"、企业内训的数字化素养课程。尤其适合**恐惧命令行、希望快速获得成就感**的学员。
- **不适合**：已有深厚开发经验、追求生产级工程化（CI/CD、容器化、多模块）的进阶营——那应直接进入 Skills、MCP、Hooks 等主题。
- **预计教学时长**：讲师演示 + 学员动手，约 **2.5–3 小时**。其中安装登录约 30 分钟，配置约 30 分钟，项目实战与迭代约 1.5–2 小时。
- **可扩展任务**：让学员把倒计时网页改成"读书清单""健身打卡""旅行计划"等个人主题，既巩固流程又产出个人化作品，结营时人手一个能展示的小项目。

## 参考来源

1. [Claude Code Advanced setup（官方文档）](https://code.claude.com/docs/en/setup) — 系统要求、各平台原生安装命令、Windows 原生 vs WSL 对比、自动更新机制。
2. [How to Set Up Claude Code on Windows 11 with WSL2（AI Code Invest）](https://aicodeinvest.com/claude-code-windows-11-wsl2-development-environment-guide/) — Windows 11 + WSL2 完整开发环境搭建，含 Node.js、Python、VS Code 配置参考。
3. [Install Claude Code on WSL2 (Windows) — 2026 Setup Guide（HeyClaude）](https://heyclau.de/entry/guides/wsl-setup-guide) — 30 分钟 WSL2 安装路径，PATH 冲突等常见报错处理。
4. [Using Claude Code on Windows — Native vs WSL2（ClaudeLab）](https://claudelab.net/en/articles/claude-code/claude-code-windows-native-wsl2-complete-guide) — 原生安装与 WSL2 两种路线的取舍对照。
5. [How to Set Up Claude Code on Windows Using WSL（LowTouch AI）](https://www.lowtouch.ai/claude-code-windows-wsl-setup-guide/) — WSL + VS Code + Git + GitHub 的端到端新手图文教程。

> [!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 等场景全覆盖。

![51学通信知识星球海报-扫码加入](https://wiki.500nian.com/images/zhixingqiu_qrcode.png)