🛠️ 零基础用 Claude Code 做出第一个小程序 · 第 1 周:从零到第一个上线的网页

Claude Code 安装与第一次使用(零基础 10 分钟跑通)

它不是聊天框,是一个能在你电脑上动手的助理

一句话先懂 · TL;DR

Claude Code 是什么、和 ChatGPT 网页有什么不同、装好它需要哪三样东西、第一次启动会看到什么、权限提示为什么会出现。零基础也能照着做。

它和你用过的 AI 聊天有什么不一样

你在网页里问 AI「帮我做个网页」,它会给你一大段代码,然后你得自己复制、新建文件、粘贴、打开浏览器……一步错就卡住。

Claude Code 不一样。它跑在你电脑的终端里,你说「帮我做个网页」,它自己新建文件、自己写进去、自己运行测试,做完告诉你「在浏览器打开 index.html 就能看到」。

🔆网页版 AI 像一个只动嘴的顾问;Claude Code 像一个坐在你电脑前、手放在键盘上的实习生。你说目标,它动手。

装之前,你只需要三样东西

1. 一个终端:Mac 自带「终端」,Windows 用「PowerShell」或「Windows Terminal」。它就是一个打字下命令的黑窗口,不可怕。
2. Node.js:Claude Code 靠它运行。去 nodejs.org 下载 LTS 版安装即可。
3. 一个能用的账号或 API 密钥:登录 Claude 账号,或者在设置里填一个 API Key。国内网络环境下要先确认你的网络能访问它,这一步卡住的人最多。

# 1. 装 Claude Code(全局安装,只做一次)
npm install -g @anthropic-ai/claude-code

# 2. 进到你准备放项目的文件夹
mkdir my-first-site && cd my-first-site

# 3. 启动,第一次会引导你登录
claude
⚠️在项目文件夹里启动。Claude Code 把你启动它的那个文件夹当成「工作区」,你要是在桌面根目录启动,它就会在桌面上乱建文件。

第一次对话,以及那个「允许吗?」的提示

启动后你会看到一个输入框。试着打:

> 在这个文件夹里创建 index.html,页面上显示「你好,世界」,用大号字居中。

几秒后它会告诉你:它准备新建一个文件,问你「允许吗?」。这不是它不会做,这是安全设计:凡是要改你电脑里的东西,它默认先问你

什么时候该点允许?看两件事:
- 它要动的是不是你这个项目文件夹里的文件。是,放心允许。
- 这个动作能不能撤销。新建文件、改文件都能撤销(后面会学 git 一键回滚);删除文件夹、发布到网上这类动作,先看清楚再点。

💡第一课的目标只有一个:看到它替你新建了文件,你在浏览器里打开看到了「你好,世界」。做到这一步,你已经完成了 90% 的人卡住的地方。

自测 · 学完检查一下

想真正动手做题、记进度、攒连胜?到互动课里练。

小林想做一个「每天记账」的网页。下面哪个动作,只有 Claude Code 这类工具能做、网页版 AI 做不到?

答案:在她电脑上直接新建 index.html 并把代码写进去,然后打开测试

写代码、讲概念、提建议,网页版 AI 都能做。差别在**动手**:Claude Code 能操作你电脑里的文件和命令,其余三项都只是在对话框里输出文字。

阿明按教程装完,输入 claude 却提示「command not found」。最可能漏了哪一步?

答案:没装 Node.js,或者装完没重开终端,npm 的全局命令找不到

claude 命令是 npm 全局安装出来的,依赖 Node.js;装完 Node 后旧终端窗口不认识新命令,重开一个即可。小程序账号、CLAUDE.md 都是后面的事,Python 与它无关。

判断:小雨在「桌面」上直接输入 claude 启动,然后说「帮我做个记账网页」。这样做没问题。

答案:

启动的位置就是它的工作区。在桌面启动,它会把 index.html、样式文件全丢在桌面上,以后越来越乱。正确做法是先建一个项目文件夹,进去再启动。

Claude Code 弹出提示:「我将运行 rm -rf ~/Documents 来清理旧文件,允许吗?」你该怎么做?

答案:拒绝。它要删的是项目外的整个文档目录,而且删除不可撤销

两条判断标准它都不满足:动的不是项目文件夹,动作也撤销不了。git 只能回滚项目里被它跟踪的文件,救不回整个文档目录。AI 会犯错,权限提示就是留给你踩刹车的。

下面哪个提示可以直接放心允许?

答案:「我将在当前项目里新建 style.css 并写入样式」

只有第一项同时满足「在项目里」和「可撤销」。公开上传、改系统设置、清密码都出了项目范围,而且后果不容易收回,必须看清再决定。

想边练边学,而不只是读?

到互动课里答题、记进度、攒连胜——游客即可试学,无需注册。

进入互动课程 →

学点新东西,不错过更新

新课程、新功能、学习小技巧——偶尔一封,随时退订。