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