01-environment-setup_index.png

第一章：环境搭建与代码运行基础

序言

Moss会自动帮你解决开发环境的问题，这往往是让初学者非常抓狂，从入门到放弃的时刻。

但如果你依然坚定的选择在自己的电脑中从零开始，那你需要认真学习本章节的内容。

AI只能扮演副驾驶（copilot）的角色，学习以下内容确实有助于您对整个开发工程的管控。

代码格式

你遇到的第一个困惑是 AI 输出代码的格式。有时候，AI 会直接给你一段长长的代码，告诉你保存为 index.html。你照做了，新建文件、粘贴、保存，双击打开，浏览器里真的出现了一个会动的网页。你很高兴，以为编程不过如此。这种文件通常把结构（HTML）、样式（CSS）和逻辑（JavaScript）都塞在了一起，适合做简单的演示。

但当你要求更复杂的功能时，AI 开始给你后缀是 .ts 或 .tsx 的代码，还提到了 import、React 等词汇。你像之前一样保存文件，双击打开，却发现根本打不开，或者显示一堆看不懂的代码。你懵了，为什么代码不能跑了？

你不解地问：“既然 AI 都能帮我写代码了，为什么还要学这些？”

老师傅说：“AI 能写代码，但’怎么让它跑起来’需要你理解。这就像导航：能告诉你路线，但你得先会开车。环境搭建不是门槛，而是你与 AI 协作的第一步。”

→ 1.1 代码格式演变 会带你从单文件 HTML 走向现代模块化开发。

details”,S,[o[0]||(o[0]=n(“summary”,null,”🎮 点击体验：交互式演示”,-1)),o[1]||(o[1]=n(“p”,null,“下面是一个精致的交互式演示，包含计数器、计时器和进制转换功能：”,-1)),s(r),o[2]||(o[2]=n(“blockquote”,null,[n(“p”,null,[t(”💡 ”),n(“strong”,null,“这就是现代前端开发的体验”),t(“：精致的界面、流畅的动画、丰富的交互。使用键盘快捷键 ↑↓ 调整数值，R 重置，H 切换历史记录。”)])],-1))]),o[22]||(o[22]=e(‘

TypeScript 与 Node.js

老师傅告诉你，这是因为现代开发使用了 TypeScript（简称 TS），它比普通的 JavaScript 更严谨，适合做大项目。但是，浏览器看不懂 TS，它需要一个”翻译官”（编译器）把 TS 翻译成浏览器能懂的 JavaScript。这个编译器以及构建工具需要 Node.js 环境来运行。如果不安装 Node.js，你的电脑就无法运行这些现代化的代码构建工具。

→ 1.2 技术栈概念 和 1.3 浏览器与服务器基础 会帮你建立这些认知。

nvm 版本管理

你兴致勃勃地去下载 Node.js，但老师傅和 Nodejs 官网一样，拦住了你。他推荐你安装 nvm（Node Version Manager）。因为 Node.js 经常更新，不同项目可能需要不同版本，nvm 让你能轻松切换版本，而不需要反复卸载重装。你通过 nvm 安装了最新的 LTS（长期支持、稳定）版本，并在老师傅的推荐下更换了国内镜像源（为了解决下载慢的问题），终于拥有了所谓的运行环境。

→ 1.4 Terminal 终端入门 会教你掌握命令行的基本操作，1.5 Node.js 环境与包管理 会带你完成这些配置。

‘,7)),n(“details”,h,[o[3]||(o[3]=n(“summary”,null,”🔄 点击体验：Node 版本管理器”,-1)),o[4]||(o[4]=n(“p”,null,“试试切换不同的 Node.js 版本，体验 nvm 的便捷：”,-1)),s(a),o[5]||(o[5]=n(“blockquote”,null,[n(“p”,null,[t(”💡 ”),n(“strong”,null,“练习”),t(“：点击不同版本进行切换，观察当前版本的变化。尝试安装一个尚未安装的版本。”)]),n(“p”,null,[t(”🎯 ”),n(“strong”,null,“核心概念”),t(“：nvm 让你可以在同一台电脑上管理多个 Node.js 版本，不同项目可以使用不同的版本而不会冲突。”)])],-1))]),o[23]||(o[23]=n(“h3”,{id:“terminal-终端”,tabindex:“-1”},[t(“Terminal 终端 ”),n(“a”,{class:“header-anchor”,href:“#terminal-终端”,“aria-label”:‘Permalink to “Terminal 终端”’},”​”)],-1)),o[24]||(o[24]=n(“p”,null,[t(“接着，你接触到了 ”),n(“strong”,null,“Terminal（终端）”),t(“（如 Windows 的 CMD、PowerShell 或 Mac 的 Terminal）。它不是什么神秘的黑客工具，而是一种直接通过文字指令与操作系统对话的方式。相比于用鼠标点击图标，终端能更精确、更快速地执行复杂的任务。”)],-1)),o[25]||(o[25]=n(“p”,null,[t(“新手最容易崩溃的时刻，就是敲完命令回车后看到 ”),n(“code”,null,“command not found”),t(“。这个报错其实有固定的排查思路：先检查命令拼写，然后确认工具是否已安装，再检查当前目录是否正确。建立这个排查思维比记忆具体错误信息更重要。”)],-1)),o[26]||(o[26]=n(“hr”,null,null,-1)),n(“details”,q,[o[6]||(o[6]=n(“summary”,null,“🖥️ 点击体验：Terminal Pro”,-1)),o[7]||(o[7]=n(“p”,null,“试试在下面的专业终端模拟器中输入命令：”,-1)),s(p),o[8]||(o[8]=e(”

💡 练习：试试输入 ls 查看文件，然后输入 cd Documents 切换目录，再用 pwd 查看当前路径。

🎨 颜色说明：蓝色=文件夹，绿色=可执行文件，青色=链接，白色=普通文件

⌨️ 快捷键：Tab 自动补全 | ↑↓ 历史命令 | Ctrl+L 清屏 | Ctrl+C 取消

pnpm 包管理器

那么，怎么安装别人写好的代码包呢？你需要一个包管理器。Node.js 自带了一个叫 npm 的包管理器，但它通过复制的方式安装依赖，会占用大量磁盘空间。现在更推荐 pnpm——通过硬链接和符号链接技术，能节省约 50%-70% 的磁盘空间，且安装速度显著更快。

在 AI 开发中，你会频繁创建新项目尝试不同方向，pnpm 能为你节省大量等待时间和存储空间。

→ 1.5 Node.js 环境与包管理 会详细讲解 nvm 和 pnpm 的安装配置。

：点击”安装”按钮，观察 pnpm 安装依赖的四个步骤。’)]),n(“p”,null,[t(”🎯 ”),n(“strong”,null,“核心概念”),t(“：pnpm 通过硬链接技术共享依赖，比 npm 节省 50%-70% 磁盘空间。”)])],-1))]),o[31]||(o[31]=e(‘

模型与工具

环境装好了，你手里握着一份庞大的工具清单，面对各种模型、编辑器和 CLI 工具，你彻底晕了。

经过老师傅的介绍，你终于明白了：模型决定代码能力的速度和上限，工具决定代码实现的方式和效率。

说起模型，你可能会觉得既然 Claude 能力最强，就全部用它。但老师傅提醒你：国产模型便宜且访问快。以 GLM 4.7 为例，每月总计可用总量高达几十亿到数百亿 tokens，折算下来极具性价比。这个成本意识在 AI 原生开发中非常重要，否则规模上来后账单会让你震惊。

→ 1.6 模型与工具 会详细介绍各类开发工具的选择和配置。

文件夹命名

现在，你拥有了完整的现代化开发环境，可以处理任何 AI 生成的 TS 代码了。老师傅特意叮嘱：新建项目时，务必新建一个不含有中文、空格的文件夹。这是因为许多底层的开发工具对非英文字符支持不佳，中文路径往往是各种离奇报错的根源。

→ 1.7 创建项目 会教你从文件夹命名规范到项目模板创建。

Localhost 与端口

代码都在本地了，但你完全不知道怎么把它跑起来。你试探性地把文件发给 AI，问它：“我该怎么启动这个项目？“AI 告诉你，要先运行 pnpm install 安装依赖，然后运行 pnpm dev 启动开发服务器。你照着敲了进去，屏幕上最后停在了 http://localhost:3000。

你盯着这个地址，老师傅给你补了一课网络基础：Localhost 也就是 127.0.0.1，在网络世界里，这代表”你自己的电脑”。如果把你的电脑比作一栋大楼，IP 是大楼的地址，那么端口就是具体的房间号。你的网页应用此刻正坐在 3000 号房间里，等待你的浏览器去敲门。

你激动地点开这个链接，网页真的出来了！老师傅顺便提了一句，虽然现在的开发工具都很智能——如果你再开一个项目，它们通常会自动顺延去 3001 房间——但在生产环境里，规则是严苛的：一个端口同时只能容纳一个程序。如果你看到 EADDRINUSE 这样的红色报错，别慌，让 AI 为你换一个端口就行了。

→ 1.8 Localhost 与端口 会详细讲解这些网络基础。