你有一台新电脑，里面干干净净，除了浏览器什么都没有。你不会写代码，但是你觉得最近 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 走向现代模块化开发。
试试切换不同的 Node.js 版本，体验 nvm 的便捷：
💡 练习：点击不同版本进行切换，观察当前版本的变化。尝试安装一个尚未安装的版本。
🎯 核心概念：nvm 让你可以在同一台电脑上管理多个 Node.js 版本，不同项目可以使用不同的版本而不会冲突。
接着，你接触到了 终端（Terminal）（如 Windows 的 CMD、PowerShell 或 Mac 的 Terminal）。它不是什么神秘的黑客工具，而是一种直接通过文字指令与操作系统对话的方式。相比于用鼠标点击图标，终端能更精确、更快速地执行复杂的任务。
新手最容易崩溃的时刻，就是敲完命令回车后看到 command not found。这个报错其实有固定的排查思路：先检查命令拼写，然后确认工具是否已安装，再检查当前目录是否正确。建立这个排查思维比记忆具体错误信息更重要。
探索 npm 生态系统中常用的开源包：
💡 练习：点击分类筛选不同类型的包，点击卡片查看详情并模拟安装。
🎯 核心概念：npm 拥有超过 200 万个开源包，涵盖几乎所有开发需求，大幅加速开发效率。
那么，怎么安装别人写好的代码包呢？你需要一个包管理器。Node.js 自带了一个叫 npm 的包管理器，但它通过复制的方式安装依赖，会占用大量磁盘空间。现在更推荐 pnpm——通过硬链接和符号链接技术，能节省约 50%-70% 的磁盘空间，且安装速度显著更快。
在 AI 开发中，你会频繁创建新项目尝试不同方向，pnpm 能为你节省大量等待时间和存储空间。
→ 1.5 包管理与项目配置 会详细讲解 nvm 和 pnpm 的工作原理。
探索一个典型项目的文件结构，了解命名规范：
💡 练习：点击文件夹展开/折叠，查看项目结构。注意观察底部的命名规范提示。
⚠️ 重要提醒：文件夹和文件名应避免使用中文和空格，以防止工具报错。
代码都在本地了，但你完全不知道怎么把它跑起来。你试探性地把文件发给 AI，问它："我该怎么启动这个项目？"AI 告诉你，要先运行 pnpm install 安装依赖，然后运行 pnpm dev 启动开发服务器。你照着敲了进去，屏幕上最后停在了 http://localhost:3000。
你盯着这个地址，老师傅给你补了一课网络基础：Localhost 也就是 127.0.0.1，在网络世界里，这代表"你自己的电脑"。如果把你的电脑比作一栋大楼，IP 是大楼的地址，那么端口就是具体的房间号。你的网页应用此刻正坐在 3000 号房间里，等待你的浏览器去敲门。
你激动地点开这个链接，网页真的出来了！老师傅顺便提了一句，虽然现在的开发工具都很智能——如果你再开一个项目，它们通常会自动顺延去 3001 房间——但在生产环境里，规则是严苛的：一个端口同时只能容纳一个程序。如果你看到 EADDRINUSE 这样的红色报错，别慌，让 AI 为你换一个端口就行了。
→ 1.8 Localhost 与端口 会详细讲解这些网络基础。
环境装好后，新建一个英文文件夹，打开 AI 工具对它说："帮我在这里创建一个 Next.js 项目"，然后跟着它的指引执行命令，最后在浏览器打开 localhost:3000——你就正式踏入 AI 编程的世界了！
现在，你拥有了完整的现代化开发环境，可以处理任何 AI 生成的 TS 代码了。老师傅特意叮嘱：新建项目时，务必新建一个不含有中文、空格的文件夹。这是因为许多底层的开发工具对非英文字符支持不佳，中文路径往往是各种离奇报错的根源。
→ 1.7 创建项目 会教你从文件夹命名规范到项目模板创建。
选择一个可用端口，体验 localhost 连接过程：
💡 练习：点击绿色可用端口，然后点击"连接"按钮。尝试点击红色占用端口看看会发生什么。
🎯 核心概念：localhost (127.0.0.1) 代表你自己的电脑，端口号是应用运行的"房间号"。
环境装好后，新建一个英文文件夹，打开 AI 工具对它说："帮我在这里创建一个 Next.js 项目"，然后跟着它的指引执行命令，最后在浏览器打开 localhost:3000——你就正式踏入 AI 编程的世界了！