首页 › tutorials › 零基础造首个纪念日倒计时网页

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

概述

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

前置条件

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

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

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

把下面这行命令复制进去,回车:

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

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

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

如果你用的是 CMD 而不是 PowerShell:CMD 没有 irm 命令,改用:

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、Homebrew 安装不会自动更新,需要偶尔手动执行 winget upgrade Anthropic.ClaudeCode 或 brew upgrade claude-code。

常见问题与解决

第二步:验证安装并登录认证

安装完成后,关闭并重新打开 PowerShell(让环境变量生效),然后验证:

claude --version

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

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

claude doctor

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

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

claude

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

常见问题与解决

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

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

入口 A:终端 REPL(最直接)

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

入口 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 每次启动都会自动读取。

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

claude
# 进入交互界面后输入:
/init

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

# 纪念日倒计时网页

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

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

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

4.3 settings.json 进阶配置(可选)

Claude Code 的设置文件是 JSON 格式,分三个层级(优先级从高到低):

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

{
  "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 也完全没问题。

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

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

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 协作迭代

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

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

经过几轮迭代,你的 index.html 大致会包含这些核心逻辑(示意片段):

// 计算距离目标日期还有多少天
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:

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

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

完整工作流示意

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

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 清空后重新描述任务

延伸阅读

训练营适用性评估

参考来源

  1. Claude Code Advanced setup(官方文档) — 系统要求、各平台原生安装命令、Windows 原生 vs WSL 对比、自动更新机制。
  2. How to Set Up Claude Code on Windows 11 with WSL2(AI Code Invest) — Windows 11 + WSL2 完整开发环境搭建,含 Node.js、Python、VS Code 配置参考。
  3. Install Claude Code on WSL2 (Windows) — 2026 Setup Guide(HeyClaude) — 30 分钟 WSL2 安装路径,PATH 冲突等常见报错处理。
  4. Using Claude Code on Windows — Native vs WSL2(ClaudeLab) — 原生安装与 WSL2 两种路线的取舍对照。
  5. How to Set Up Claude Code on Windows Using WSL(LowTouch AI) — 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学通信知识星球海报-扫码加入