AI 积木机器人 AI全栈技师图灵奖预备役
← 返回学习路径

LESSON 03 · 前端实现

搭建开发环境,把项目跑起来

照着顺序做一遍,以后每次拿到新项目都能自己搞定:环境准备 → 安装依赖 → 启动项目。

预计 15 分钟 首次搭建 按顺序执行

01

环境准备

安装 Node.js(建议使用项目指定的版本,见 .nvmrc),先安装 nvm,然后使用 nvm use 即可统一 Node 版本。

安装 pnpm 包管理器。

02

安装依赖

项目代码只包含团队自己写的部分,还需要下载很多第三方库(叫"依赖")。安装完依赖后,项目才能正常运行。通常只需要在第一次拉取项目、或者依赖有更新时执行。

# 安装根目录依赖
pnpm install

# 安装特定应用依赖
cd apps/web
pnpm install

03

启动开发服务器

日常最常用的命令。运行后终端会输出一个本地地址(通常是 localhost:3000),在浏览器中打开就能看到页面。开发服务器会实时监听文件变化,修改代码后浏览器会自动刷新。

# 启动所有应用
pnpm dev

# 启动特定应用
cd apps/web
pnpm dev
# 或使用 TurboRepo 命令
pnpm --filter web dev

04

构建项目

把源代码编译、压缩、打包成可以直接部署到服务器的文件。和 dev 的区别是:dev 是开发时用的,能看到实时效果;build 是生产用的,生成最终可部署的文件。日常工作中主要用 dev,build 一般在发布时才需要。

# 构建所有应用
pnpm build

# 构建特定应用
pnpm --filter web build

05

代码质量检查

提交代码前运行这两个命令。lint 会检查代码中有没有潜在问题或不规范的写法,有问题会在终端列出来。format 会自动统一代码格式(缩进、换行、引号等),让团队所有人的代码风格一致。很多项目会在 CI 流水线中强制检查,不通过就无法合并。

# 运行 ESLint 检查
pnpm lint

# 格式化代码
pnpm format

本课核心

环境准备 → 安装依赖 → dev 跑起来