第一章：环境搭建与代码运行基础
序言
你有一台新电脑，里面干干净净，除了浏览器什么都没有。你不会写代码，但是你觉得最近 AI 很火，心里有一个绝妙的 App 想法，打算在网页上指挥 AI 帮你做一个 Demo。
代码格式
你遇到的第一个困惑是 AI 输出代码的格式。有时候，AI 会直接给你一段长长的代码，告诉你保存为 index.html。你照做了，新建文件、粘贴、保存，双击打开，浏览器里真的出现了一个会动的网页。你很高兴，以为编程不过如此。这种文件通常把结构（HTML）、样式（CSS）和逻辑（JavaScript）都塞在了一起，适合做简单的演示。
但当你要求更复杂的功能时，AI 开始给你后缀是 .ts 或 .tsx 的代码，还提到了 import、React 等词汇。你像之前一样保存文件，双击打开，却发现根本打不开，或者显示一堆看不懂的代码。你懵了，为什么代码不能跑了？
你不解地问："既然 AI 都能帮我写代码了，为什么还要学这些？"
老师傅说："AI 能写代码，但'怎么让它跑起来'需要你理解。这就像导航：能告诉你路线，但你得先会开车。环境搭建不是门槛，而是你与 AI 协作的第一步。"
1.1 代码格式演变 (./01-code-formats.md) 会带你从单文件 HTML 走向现代模块化开发。
TypeScript 与 Node.js
老师傅告诉你，这是因为现代开发使用了 TypeScript（简称 TS），它比普通的 JavaScript 更严谨，适合做大项目。但是，浏览器看不懂 TS，它需要一个"翻译官"把 TS 翻译成浏览器能懂的语言。这个翻译官运行在你的电脑上，它的名字叫 Node.js。如果不安装它，你的电脑就无法运行这些现代化的代码构建工具。
1.2 技术栈概念 (./02-tech-stack.md) 和 1.3 浏览器与服务器基础 (./03-browser-server.md) 会帮你建立这些认知。
nvm 版本管理
你兴致勃勃地去下载 Node.js，但老师傅和 Nodejs 官网一样，拦住了你。他推荐你安装 nvm（Node Version Manager）。因为 Node.js 经常更新，不同项目可能需要不同版本，nvm 让你能轻松切换版本，而不需要反复卸载重装。你通过 nvm 安装了最新的 LTS（长期支持、稳定）版本，并在老师傅的推荐下更换了国内镜像源（为了解决下载慢的问题），终于拥有了所谓的运行环境。
1.4 Terminal 终端入门 (./04-terminal-basics.md) 会教你掌握命令行的基本操作，1.5 Node.js 环境与包管理 (./05-nodejs-and-pnpm.md) 会带你完成这些配置。
Terminal 终端
接着，你接触到了 Terminal（终端）（如 Windows 的 CMD、PowerShell 或 Mac 的 Terminal）。它不是什么神秘的黑客工具，而是一种直接通过文字指令与操作系统对话的方式。相比于用鼠标点击图标，终端能更精确、更快速地执行复杂的任务。
新手最容易崩溃的时刻，就是敲完命令回车后看到 command not found。这个报错其实有固定的排查思路：先检查命令拼写，然后确认工具是否已安装，再检查当前目录是否正确。建立这个排查思维比记忆具体错误信息更重要。
开源代码包
环境有了，老师傅告诉你，现代软件开发很少从零开始写起。就像盖房子不需要自己烧砖一样，你可以直接使用全世界程序员贡献的代码——也就是开源代码包。React 帮你搞定界面，Axios 帮你搞定网络请求，Day.js 帮你处理时间，Zod 帮你处理数据验证……这些现成的代码包能让你专注于业务逻辑，而不是重复造轮子。
pnpm 包管理器
那么，怎么安装别人写好的代码包呢？你需要一个包管理器。Node.js 自带了一个叫 npm，但它下载速度慢，而且会把你的硬盘塞满重复的文件。现在更推荐 pnpm——下载速度极快，而且通过巧妙的链接技术节省大量的硬盘空间。
从实战数据来看，当你同时维护 10 个项目时，npm 会占用约 5GB 磁盘空间，而 pnpm 只需要约 2GB，且起新项目时安装更快。在 AI 开发中，你会频繁创建新项目尝试不同方向，pnpm 能省下 2-3 倍的下载时间和 60% 的磁盘空间。
1.5 Node.js 环境与包管理 (./05-nodejs-and-pnpm.md) 会详细讲解 nvm 和 pnpm 的安装配置。
文件夹命名
现在，你拥有了完整的现代化开发环境，可以处理任何 AI 生成的 TS 代码了。老师傅特意叮嘱：新建项目时，务必新建一个不含有中文、空格的文件夹。这是因为许多底层的开发工具对非英文字符支持不佳，中文路径往往是各种离奇报错的根源。
1.7 创建项目 (./07-creating-project.md) 会教你从文件夹命名规范到项目模板创建。
Localhost 与端口
代码都在本地了，但你完全不知道怎么把它跑起来。你试探性地把文件发给 AI，问它："我该怎么启动这个项目？"AI 告诉你，要先运行 pnpm install 安装依赖，然后运行 pnpm dev 启动开发服务器。你照着敲了进去，屏幕上最后停在了 http://localhost:3000。
你盯着这个地址，老师傅给你补了一课网络基础：Localhost 也就是 127.0.0.1，在网络世界里，这代表"你自己的电脑"。如果把你的电脑比作一栋大楼，IP 是大楼的地址，那么端口就是具体的房间号。你的网页应用此刻正坐在 3000 号房间里，等待你的浏览器去敲门。
你激动地点开这个链接，网页真的出来了！老师傅顺便提了一句，虽然现在的开发工具都很智能——如果你再开一个项目，它们通常会自动顺延去 3001 房间——但在生产环境里，规则是严苛的：一个端口同时只能容纳一个程序。如果你看到 EADDRINUSE 这样的红色报错，别慌，让 AI 为你换一个端口就行了。
1.8 Localhost 与端口 (./08-localhost-and-ports.md) 会详细讲解这些网络基础。
模型与工具
环境装好了，你手里握着一份庞大的工具清单，面对各种模型、编辑器和 CLI 工具，你彻底晕了。
经过老师傅的介绍，你终于明白了：模型决定代码能力的速度和上限，工具决定代码实现的方式和效率。
说起模型，你可能会觉得既然 Claude 能力最强，就全部用它。但老师傅提醒你：国产模型便宜且访问快。以 GLM 4.7 为例，每月总计可用总量高达几十亿到数百亿 tokens，折算下来极具性价比。这个成本意识在 AI 原生开发中非常重要，否则规模上来后账单会让你震惊。
1.6 模型与工具 (./06-models-and-tools.md) 会详细介绍各类开发工具的选择和配置。
动手实践
按 1.5 节装好环境后，新建一个英文文件夹，打开 AI 工具对它说："帮我在这里创建一个 Next.js 项目"，然后跟着它的指引执行命令，最后在浏览器打开 localhost:3000——你就正式踏入 AI 编程的世界了！