第一章：环境搭建与代码运行基础
序言
你有一台新电脑，里面干干净净，除了浏览器什么都没有。你不会写代码，但是你觉得最近 AI 很火，心里有一个绝妙的 App 想法，打算在网页上指挥 AI 帮你做一个 Demo。
想直接开始？ 查看 1.0 快速开始，5 分钟完成环境安装。
代码格式
你遇到的第一个困惑是 AI 输出代码的格式。有时候，AI 会直接给你一段长长的代码，告诉你保存为 index.html。你照做了，新建文件、粘贴、保存，双击打开，浏览器里真的出现了一个会动的网页。你很高兴，以为编程不过如此。这种文件通常把结构（HTML）、样式（CSS）和逻辑（JavaScript）都塞在一起，适合做简单的演示。
但当你要求更复杂的功能时，AI 开始给你后缀是 .ts 或 .tsx 的代码，还提到了 import、React 等词汇。你像之前一样保存文件，双击打开，却发现根本打不开，或者显示一堆看不懂的代码。你懵了，为什么代码不能跑了？
你不解地问："既然 AI 都能帮我写代码了，为什么还要学这些？"
老师傅说："AI 能写代码，但'怎么让它跑起来'需要你理解。这就像导航：能告诉你路线，但你得先会开车。环境搭建不是门槛，而是你与 AI 协作的第一步。"
→ 1.1 代码格式演变 会带你从单文件 HTML 走向现代模块化开发。
🎮 点击体验：交互式演示
下面是一个精致的交互式演示，包含计数器、计时器和进制转换功能：
💡 这就是现代前端开发的体验：精致的界面、流畅的动画、丰富的交互。使用键盘快捷键 ↑↓ 调整数值，R 重置，H 切换历史记录。
TypeScript 与 Node.js
老师傅告诉你，这是因为现代开发使用了 TypeScript（简称 TS），它比普通的 JavaScript 更严谨，适合做大项目。但是，浏览器看不懂 TS，它需要一个"翻译官"（编译器）把 TS 翻译成浏览器能懂的 JavaScript。这个编译器以及构建工具需要 Node.js 环境来运行。如果不安装 Node.js，你的电脑就无法运行这些现代化的代码构建工具。
→ 1.2 认识技术栈 和 1.3 浏览器与服务器基础 会帮你建立这些认知。
nvm 版本管理
你兴致勃勃地去下载 Node.js，但老师傅和 Node.js 官网一样，拦住了你。他推荐你安装 nvm（Node Version Manager）。因为 Node.js 经常更新，不同项目可能需要不同版本，nvm 让你能轻松切换版本，而不需要反复卸载重装。你通过 nvm 安装了最新的 LTS（长期支持、稳定）版本，并在老师傅的推荐下更换了国内镜像源（为了解决下载慢的问题），终于拥有了所谓的运行环境。
→ 1.4 终端入门 会教你掌握命令行的基本操作，1.5 包管理与项目配置 会带你完成这些配置。
🔄 点击体验：Node 版本管理器
试试切换不同的 Node.js 版本，体验 nvm 的便捷：
nvm list查看版本nvm use 22切换版本nvm install 20安装版本💡 练习：点击不同版本进行切换，观察当前版本的变化。尝试安装一个尚未安装的版本。
🎯 核心概念：nvm 让你可以在同一台电脑上管理多个 Node.js 版本，不同项目可以使用不同的版本而不会冲突。
终端入门
接着，你接触到了 终端（Terminal）（如 Windows 的 CMD、PowerShell 或 Mac 的 Terminal）。它不是什么神秘的黑客工具，而是一种直接通过文字指令与操作系统对话的方式。相比于用鼠标点击图标，终端能更精确、更快速地执行复杂的任务。
新手最容易崩溃的时刻，就是敲完命令回车后看到 command not found。这个报错其实有固定的排查思路：先检查命令拼写，然后确认工具是否已安装，再检查当前目录是否正确。建立这个排查思维比记忆具体错误信息更重要。
🖥️ 点击体验：Terminal Pro
试试在下面的专业终端模拟器中输入命令：
help 查看可用命令💡 练习：试试输入
ls查看文件，然后输入cd Documents切换目录，再用pwd查看当前路径。🎨 颜色说明：蓝色=文件夹，绿色=可执行文件，青色=链接，白色=普通文件
⌨️ 快捷键：
Tab自动补全 |↑↓历史命令 |Ctrl+L清屏 |Ctrl+C取消
开源代码包
环境有了，老师傅告诉你，现代软件开发很少从零开始写起。就像盖房子不需要自己烧砖一样，你可以直接使用全世界程序员贡献的代码——也就是开源代码包。React 帮你搞定界面，Axios 帮你搞定网络请求，Day.js 帮你处理时间，Zod 帮你处理数据验证……这些现成的代码包能让你专注于业务逻辑，而不是重复造轮子。
📦 点击体验：开源包生态系统
探索 npm 生态系统中常用的开源包：
reactUI 框架next全栈框架vueUI 框架axiosHTTP 请求lodash工具库dayjs日期处理zod数据验证tailwindcssCSS 框架@tanstack/query数据管理prismaORMtypescript开发工具vite构建工具eslint代码质量prettier代码格式化shadcn/uiUI 组件motion动画express后端框架hono后端框架trpcAPIzustand状态管理💡 练习：点击分类筛选不同类型的包，点击卡片查看详情并模拟安装。
🎯 核心概念：npm 拥有超过 200 万个开源包，涵盖几乎所有开发需求，大幅加速开发效率。
pnpm 包管理器
那么，怎么安装别人写好的代码包呢？你需要一个包管理器。Node.js 自带了一个叫 npm 的包管理器，但它通过复制的方式安装依赖，会占用大量磁盘空间。现在更推荐 pnpm——通过硬链接和符号链接技术，能节省约 50%-70% 的磁盘空间，且安装速度显著更快。
在 AI 开发中，你会频繁创建新项目尝试不同方向，pnpm 能为你节省大量等待时间和存储空间。
→ 1.5 包管理与项目配置 会详细讲解 nvm 和 pnpm 的工作原理。
📦 点击体验：pnpm 安装过程
看看 pnpm 是如何安装项目依赖的：
💡 练习：点击"安装"按钮，观察 pnpm 安装依赖的四个步骤。
🎯 核心概念：pnpm 通过硬链接技术共享依赖，比 npm 节省 50%-70% 磁盘空间。
模型与工具
环境装好了，你手里握着一份庞大的工具清单，面对各种模型、编辑器和 CLI 工具，你彻底晕了。
经过老师傅的介绍，你终于明白了：模型决定代码能力的速度和上限，工具决定代码实现的方式和效率。
说起模型，你可能会觉得既然 Claude 能力最强，就全部用它。但老师傅提醒你：国产模型便宜且访问快。以 GLM 4.7 为例，每月总计可用总量高达几十亿到数百亿 tokens，折算下来极具性价比。这个成本意识在 AI 原生开发中非常重要，否则规模上来后账单会让你震惊。
→ 1.6 模型与工具 会详细介绍各类开发工具的选择和配置。
文件夹命名
现在，你拥有了完整的现代化开发环境，可以处理任何 AI 生成的 TS 代码了。老师傅特意叮嘱：新建项目时，务必新建一个不含有中文、空格的文件夹。这是因为许多底层的开发工具对非英文字符支持不佳，中文路径往往是各种离奇报错的根源。
→ 1.7 创建项目 会教你从文件夹命名规范到项目模板创建。
📁 点击体验：项目文件结构
探索一个典型项目的文件结构，了解命名规范：
my-project使用英文连字符my_project使用下划线我的项目避免中文my project避免空格💡 练习：点击文件夹展开/折叠，查看项目结构。注意观察底部的命名规范提示。
⚠️ 重要提醒：文件夹和文件名应避免使用中文和空格，以防止工具报错。
Localhost 与端口
代码都在本地了，但你完全不知道怎么把它跑起来。你试探性地把文件发给 AI，问它："我该怎么启动这个项目？"AI 告诉你，要先运行 pnpm install 安装依赖，然后运行 pnpm dev 启动开发服务器。你照着敲了进去，屏幕上最后停在了 http://localhost:3000。
你盯着这个地址，老师傅给你补了一课网络基础：Localhost 也就是 127.0.0.1，在网络世界里，这代表"你自己的电脑"。如果把你的电脑比作一栋大楼，IP 是大楼的地址，那么端口就是具体的房间号。你的网页应用此刻正坐在 3000 号房间里，等待你的浏览器去敲门。
你激动地点开这个链接，网页真的出来了！老师傅顺便提了一句，虽然现在的开发工具都很智能——如果你再开一个项目，它们通常会自动顺延去 3001 房间——但在生产环境里，规则是严苛的：一个端口同时只能容纳一个程序。如果你看到 EADDRINUSE 这样的红色报错，别慌，让 AI 为你换一个端口就行了。
→ 1.8 Localhost 与端口 会详细讲解这些网络基础。
🌐 点击体验：Localhost 与端口可视化
选择一个可用端口，体验 localhost 连接过程：
pnpm dev 时，可指定端口如 --port 3002💡 练习：点击绿色可用端口，然后点击"连接"按钮。尝试点击红色占用端口看看会发生什么。
🎯 核心概念：localhost (127.0.0.1) 代表你自己的电脑，端口号是应用运行的"房间号"。
动手实践
环境装好后，新建一个英文文件夹，打开 AI 工具对它说："帮我在这里创建一个 Next.js 项目"，然后跟着它的指引执行命令，最后在浏览器打开 localhost:3000——你就正式踏入 AI 编程的世界了！
现在，你拥有了完整的现代化开发环境，可以处理任何 AI 生成的 TS 代码了。老师傅特意叮嘱：新建项目时，务必新建一个不含有中文、空格的文件夹。这是因为许多底层的开发工具对非英文字符支持不佳，中文路径往往是各种离奇报错的根源。
→ 1.7 创建项目 会教你从文件夹命名规范到项目模板创建。
📁 点击体验：项目文件结构
探索一个典型项目的文件结构，了解命名规范：
my-project使用英文连字符my_project使用下划线我的项目避免中文my project避免空格💡 练习：点击文件夹展开/折叠，查看项目结构。注意观察底部的命名规范提示。
⚠️ 重要提醒：文件夹和文件名应避免使用中文和空格，以防止工具报错。
Localhost 与端口
代码都在本地了，但你完全不知道怎么把它跑起来。你试探性地把文件发给 AI，问它："我该怎么启动这个项目？"AI 告诉你，要先运行 pnpm install 安装依赖，然后运行 pnpm dev 启动开发服务器。你照着敲了进去，屏幕上最后停在了 http://localhost:3000。
你盯着这个地址，老师傅给你补了一课网络基础：Localhost 也就是 127.0.0.1，在网络世界里，这代表"你自己的电脑"。如果把你的电脑比作一栋大楼，IP 是大楼的地址，那么端口就是具体的房间号。你的网页应用此刻正坐在 3000 号房间里，等待你的浏览器去敲门。
你激动地点开这个链接，网页真的出来了！老师傅顺便提了一句，虽然现在的开发工具都很智能——如果你再开一个项目，它们通常会自动顺延去 3001 房间——但在生产环境里，规则是严苛的：一个端口同时只能容纳一个程序。如果你看到 EADDRINUSE 这样的红色报错，别慌，让 AI 为你换一个端口就行了。
→ 1.8 Localhost 与端口 会详细讲解这些网络基础。
🌐 点击体验：Localhost 与端口可视化
选择一个可用端口，体验 localhost 连接过程：
pnpm dev 时，可指定端口如 --port 3002💡 练习：点击绿色可用端口，然后点击"连接"按钮。尝试点击红色占用端口看看会发生什么。
🎯 核心概念：localhost (127.0.0.1) 代表你自己的电脑，端口号是应用运行的"房间号"。
动手实践
环境装好后，新建一个英文文件夹，打开 AI 工具对它说："帮我在这里创建一个 Next.js 项目"，然后跟着它的指引执行命令，最后在浏览器打开 localhost:3000——你就正式踏入 AI 编程的世界了！