从 HTML 文件升级到现代前端工程
第一章你用最原始的方式做出了一个网站——几个 HTML 文件，双击就能打开。这就像手写信件：能用，但效率低。
从这一关开始，我们换一套更强大的工具。你不需要理解这些工具的原理——你只需要知道它们是干什么的，然后让 AI 帮你操作。
为什么要升级工具？
第一章的网站有几个痛点：
改一个导航栏，要改三个文件；想改个颜色得改三遍；每次改完得手动刷新浏览器；代码越写越长，一个文件几百行，找东西很难。
现代开发工具解决的就是这些问题：
| 第一章的方式 | 现在的方式 | |---|---| | 手写三封一样的信 | 写一个模板，自动印三份 | | 改一个错别字改三遍 | 改一处，三份自动同步 | | 写完打印出来才能看 | 写一个字屏幕就同步更新 | | 一个文件几百行 | 拆成小文件，各司其职 |
三个新工具，各司其职
你接下来会接触到这几个东西，它们各自负责一件事：
Node.js：JavaScript 的运行环境。就像 Python 需要 Python 解释器才能运行，JavaScript 在浏览器之外运行需要 Node.js。你不需要直接用它，但它是其他工具的基础。
npm：包管理器，帮你下载别人写好的工具和库。就像 App Store，你说"我要安装 React"，npm 帮你下载安装好。
Vite：快速启动器。它启动一个本地开发服务器，让你改了代码浏览器立刻更新（热更新）。比第一章手动刷新浏览器快多了。
React：组件积木系统。把页面拆成一块块积木（组件），改一块全站生效。导航栏写一次，所有页面共享。
你不用学这些工具怎么用，让 AI 帮你操作就行。就像你不用学开车也能打车到目的地。
第一步：确认 Node.js 已安装
在开始之前，需要确认你的电脑上有 Node.js。
对 AI 说：
帮我检查电脑上是否安装了 Node.js，如果没有，帮我安装。 我用的是 Mac/Windows（选一个）。
AI 会帮你检查并安装。安装完成后，在终端运行 node --version，看到版本号（比如 v20.x.x）就说明成功了。
如果 AI 让你去官网下载：访问 nodejs.org，下载 LTS 版本（长期支持版），一路默认安装即可。
第二步：让 AI 创建 React 项目
在桌面新建一个文件夹 my-portfolio，在 AI 工具里打开这个文件夹，然后发送：
帮我在当前目录创建一个 Vite + React + TypeScript 项目，用于做个人作品集网站。 创建完成后，帮我安装依赖并启动开发服务器。 启动后告诉我在浏览器打开哪个地址。
AI 会帮你完成所有初始化工作。等它完成后，你会看到终端里出现类似这样的信息：
VITE v5.x.x ready in 300ms ➜ Local: http://localhost:5173/
第三步：在浏览器打开，看到页面
在浏览器里打开 AI 给你的地址（通常是 http://localhost:5173），看到页面就说明成功了。
你会看到 Vite + React 的默认欢迎页面——一个旋转的 React logo。这是正常的，后面我们会把它改成你的作品集。
第四步：体验热更新
现在做一个小实验，感受一下现代开发工具的魔法。
对 AI 说：
把首页的标题文字改成"我的作品集"
观察浏览器——它自动刷新了！ 你不需要手动刷新页面，代码一改，浏览器立刻更新。这就是"热更新"，是现代前端开发的标配体验。
项目文件结构解读
AI 创建的项目里有很多文件，你不需要全部理解，但知道几个关键文件在哪里会有帮助：
my-portfolio/ ├── src/ ← 你的代码都在这里 │ ├── App.tsx ← 应用的根组件 │ ├── main.tsx ← 入口文件（不需要改） │ └── index.css ← 全局样式 ├── public/ ← 静态资源（图片、图标等） ├── index.html ← HTML 模板（不需要改） ├── package.json ← 项目配置和依赖列表 └── vite.config.ts ← Vite 配置（不需要改）
你主要会在 src/ 目录里工作。AI 会帮你在这里创建新文件、修改现有文件。
通关条件
完成以下三步即可通关：
- AI 创建 Vite + React 项目
- npm install 安装依赖
- npm run dev 跑起来，浏览器能看到页面
卡住了？
- 如果 AI 执行命令时报错，把完整的错误信息复制给它，说"帮我解决这个报错"
- 如果报
npm: command not found——你的电脑还没装 Node.js。对 AI 说："帮我安装 Node.js，我是 Mac/Windows 系统" - 如果
npm install卡住不动很久——对 AI 说："npm 下载太慢了，帮我换成国内镜像源" - 如果端口被占用（报
EADDRINUSE）——对 AI 说："端口被占用了，帮我换一个" - 如果 Windows 上报权限错误——对 AI 说："Windows 上运行 npm 报权限错误，帮我解决"
通关条件
完成以下三步即可通关：
- AI 创建 Vite + React 项目
- npm install 安装依赖
- npm run dev 跑起来，浏览器能看到页面
卡住了？
- 如果 AI 执行命令时报错，把完整的错误信息复制给它，说"帮我解决这个报错"
- 如果报
npm: command not found——你的电脑还没装 Node.js。对 AI 说："帮我安装 Node.js，我是 Mac/Windows 系统" - 如果
npm install卡住不动很久——对 AI 说："npm 下载太慢了，帮我换成国内镜像源" - 如果端口被占用（报
EADDRINUSE）——对 AI 说："端口被占用了，帮我换一个" - 如果 Windows 上报权限错误——对 AI 说："Windows 上运行 npm 报权限错误，帮我解决"