Vibe Coding 环境搭建 (3)：前端开发必备工具 Node.js 和 npm

Oct 24, 2025

# 前端开发必备工具 Node.js 和 npm

# 什么是前端开发

前端开发就是开发界面，包括web页面（网页）或者手机app界面。我们在这篇文章里面讨论的是web页面的开发。

# Node.js 和 npm 是什么？

Node.js 和 npm 是web页面前端开发的基础设施，它们对于前端开发的意义，就像中央厨房和食材供应链对于现代餐饮业的意义。

# 为什么前端开发需要它们？

没有中央厨房和供应链，厨师当然也能在厨房从头备料、炒菜（直接用 HTML/CSS/JS 开发），但效率会随着规模的提升而严重受限。而有了这套基础设施后，“中央厨房 (Node.js)” 提供了强大的生产环境，能够运行各种自动化设备和精密器械（如 Next.js, Nuxt 等工具）；“标准化供应链 (npm)” 则提供了海量、稳定、即取即用的半成品和调料（如 React, Tailwind CSS 等开源库和一些前端组件库）。

这让前端开发能像打造大型餐饮店一样，快速、标准、大规模地“复刻”和“组装”出复杂且高质量的 Web 应用。因此，Node.js 和 npm 现已几乎成为前端开发领域不可或缺的事实标准。

# 0基础是不是先不上强度，用更底层的HTML/CSS/JS来做？

成为一个建筑师，最快的的方式是通过先进的工具建造一座房子，而不是去烧制砖块。除非你有大量的时间或者你有浓厚的兴趣。

# 安装 Node.js

在安装Node.js的同时，npm也会被安装。

# macOS 用户

# 方法一：官网安装（推荐）

  1. 访问 Node.js 官网
  2. 点击 "LTS" 版本下载
  3. 双击下载的 .pkg 文件
  4. 按照安装向导完成安装

# 方法二：使用 Homebrew

注意：下面这个是在 终端 执行的命令，如果你不知道什么是终端，建议先阅读 终端与命令行工具手册

# 安装 Node.js
brew install node

# 或者安装特定版本
brew install node@18

# 方法三：使用 nvm（版本管理器） 

# 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 重启终端或运行
source ~/.bashrc

# 安装最新 LTS 版本
nvm install --lts

# 使用特定版本
nvm use --lts

# Windows 用户

# 方法一：官网安装（推荐）

  1. 访问 Node.js 官网
  2. 点击 "LTS" 版本下载（推荐稳定版）
  3. 双击下载的 .msi 文件
  4. 按照安装向导：
    • ✅ 接受许可协议
    • ✅ 选择安装路径（默认即可）
    • ✅ 自动安装工具（包括 npm）

# 方法二：使用包管理器 

# 使用 Chocolatey
choco install nodejs

# 使用 Scoop
scoop install nodejs

# 验证安装

# 检查 Node.js 版本 

node --version
# 应该显示类似：v18.18.0

# 检查 npm 版本 

npm --version
# 应该显示类似：9.8.1

# 基础配置

# 1. 配置 npm 镜像源（中国用户推荐） 

# 查看当前镜像源
npm config get registry

# 设置淘宝镜像（更快）
npm config set registry https://registry.npmmirror.com

# 常见问题解答

# Q: npm install 很慢怎么办？

A: 

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 使用 yarn 或 pnpm
npm install -g yarn
npm install -g pnpm

# 下一步

安装 Node.js 和 npm 后，你已经做了前端开发的工具准备。

接下来你指挥AI，后面让AI去用它们就好了。

继续阅读：Vibe Coding 环境搭建 (4)：Python 与 pip 包管理基础