从零开始搭建现代前端开发环境

涵盖内容：Node.js 直接安装 vs nvm 多版本管理 | 环境变量配置 | npm/pnpm 包管理优化 | 国内镜像加速 | Vue3 项目快速搭建
适用人群：前端初学者 | Node.js 环境配置 | Vue3 开发者 | 多版本管理需求
系统支持：Windows / macOS / Linux

📋 目录

⚠️ 重要提示：【直接安装nodejs】与【nvm】以下两种方式二选一，不要同时使用！

🔍 两种安装方式对比

对比项方式一：直接安装 Node.js方式二：使用 nvm
适用场景✅ 单一版本，简单项目
✅ 初学者，快速上手		✅ 需要切换多个 Node.js 版本
✅ 多项目开发，版本要求不同
安装难度⭐ 简单，下载安装包即可⭐⭐ 稍复杂，需要安装管理工具
环境变量需要手动配置nvm 自动管理
版本切换需要卸载重装一条命令即可切换
npm 配置需要手动配置 prefix、cache 等每个版本独立管理
磁盘占用较小（只安装一个版本）较大（可能安装多个版本）
学习成本低中等

一、直接安装 Node.js

💡 适用于：单版本需求，快速上手（推荐新手）

1.1 下载 Node.js

项目说明
官网地址https://nodejs.org/
推荐版本LTS（长期支持版）
支持系统Windows / macOS / Linux

1.2 安装步骤

Windows 系统
  1. 双击下载的 .msi 安装包
  2. 点击 “Next” 接受协议
  3. 重要：选择安装路径（建议自定义，如 D:\Program Files\nodejs）
  4. 勾选 “Automatically install the necessary tools”（可选）
  5. 完成安装
macOS 系统
# 使用 Homebrew 安装（推荐）
brew install node

# 或下载 .pkg 安装包直接安装

1.3 验证安装

node -v    # 输出示例: v18.17.0
npm -v     # 输出示例: 9.6.7

✅ 安装成功后继续配置环境变量

1.4 环境变量配置

Windows 系统配置
步骤 1：创建全局模块目录

在 Node.js 安装目录下创建两个文件夹：

文件夹用途
node_global全局模块安装路径
node_cachenpm 缓存路径
# 示例路径
D:\Program Files\nodejs\node_global
D:\Program Files\nodejs\node_cache
步骤 2：配置 npm 路径

打开命令提示符（管理员模式），执行：

npm config set prefix "D:\Program Files\nodejs\node_global"
npm config set cache "D:\Program Files\nodejs\node_cache"
步骤 3：配置系统环境变量

💡 为什么要配置：让全局安装的包（如 vue、vite）能在命令行中直接使用

  1. 右键 “此电脑” → “属性” → “高级系统设置” → “环境变量”

  2. 在【系统变量】中点击【新建】：

    变量名: NODE_PATH
变量值: D:\Program Files\nodejs\node_global\node_modules

  3. 在【用户变量】中编辑【Path】变量：

    • 查找 C:\Users\你的用户名\AppData\Roaming\npm
    • 存在：修改为 D:\Program Files\nodejs\node_global
    • 不存在：新建 D:\Program Files\nodejs\node_global

    注意：D:\Program Files\nodejs 已自动添加，无需修改

  4. 在【系统变量】中选择【Path】，点击【编辑】：

    • 点击【新建】，添加：%NODE_PATH%
macOS 系统配置
# 1. 编辑配置文件（根据你的 shell 选择）
vim ~/.bash_profile  # 或 ~/.zshrc

# 2. 添加以下内容
export NODE_PATH=/usr/local/lib/node_modules
export PATH=$PATH:/usr/local/bin

# 3. 使配置生效
source ~/.bash_profile  # 或 source ~/.zshrc

✅ 环境变量配置完成

二、使用 nvm 管理 Node.js

💡 适用于：多版本需求，灵活切换（推荐进阶用户）

2.1 什么是 nvm

nvm (Node Version Manager) 是 Node.js 版本管理工具，可以在同一台电脑上安装和切换多个 Node.js 版本。

核心优势

  • ✅ 自动配置环境变量
  • ✅ 无需手动配置 node_global 和 node_cache
  • ✅ 一条命令即可切换版本
  • ✅ 每个版本的 npm 独立管理

注意事项

2.2 安装 nvm

Windows 系统

  1. 下载安装包

  2. 运行安装

    • 双击 nvm-setup.exe
    • 选择安装路径（建议默认）
    • 完成安装后重启命令行

  3. 配置国内镜像（提速）

    编辑配置文件：C:\Users\你的用户名\AppData\Roaming\nvm\settings.txt

    添加以下内容：

    node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/
macOS/Linux 系统
# 1. 安装 nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 2. 配置镜像（编辑 ~/.bashrc 或 ~/.zshrc）
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/
export NVM_IOJS_ORG_MIRROR=https://npmmirror.com/mirrors/iojs/

# 3. 使配置生效
source ~/.bashrc  # 或 source ~/.zshrc

2.3 使用 nvm

常用命令
# 查看可安装的版本
nvm list available       # Windows
nvm ls-remote            # macOS/Linux

# 安装指定版本
nvm install 18.17.0      # 安装 18.17.0
nvm install 20           # 安装最新的 20.x 版本

# 切换版本
nvm use 18.17.0          # 切换到 18.17.0

# 查看已安装版本
nvm list                 # 或 nvm ls

# 设置默认版本
nvm alias default 18     # 设置默认使用 18.x

# 查看当前版本
nvm current

# 卸载指定版本
nvm uninstall 18.17.0
验证安装
node -v    # 输出示例: v18.17.0
npm -v     # 输出示例: 9.6.7

💡 提示：每个版本的 npm 独立，切换版本后需重新配置镜像源

2.4 从直接安装迁移到 nvm

如果你已经直接安装了 Node.js，想要改用 nvm：

Windows 系统
1. 控制面板 → 卸载 Node.js
2. 删除环境变量中的 Node.js 相关配置
   - 删除 NODE_PATH 变量
   - 从 Path 中删除 Node.js 路径
3. 安装 nvm-windows（参考 2.2）
4. 使用 nvm 安装 Node.js：nvm install 18.17.0
macOS/Linux 系统
# 1. 卸载 Node.js
sudo rm -rf /usr/local/bin/node /usr/local/bin/npm /usr/local/lib/node_modules

# 2. 安装 nvm（参考 2.2）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

# 3. 使用 nvm 安装 Node.js
nvm install 18.17.0

✅ nvm 配置完成

三、npm 配置优化

💡 适用于：无论使用哪种方式安装 Node.js，都需要配置

配置国内镜像源（提升下载速度）

💡 镜像源：https://npmmirror.com

# 永久配置（推荐）
npm config set registry https://registry.npmmirror.com

# 验证配置
npm config get registry

# 临时使用（单次安装）
npm install <package> --registry=https://registry.npmmirror.com

常用配置查看命令

npm config list           # 查看所有配置
npm prefix -g             # 查看全局安装路径
npm config get cache      # 查看缓存路径
npm config get registry   # 查看镜像源

📦 包管理工具对比

工具特点安装命令
npmNode.js 自带，生态最完善无需安装
pnpm节省磁盘空间，速度快，推荐使用npm install -g pnpm
yarnFacebook 出品，速度快npm install -g yarn

四、Vue3 项目创建

方式一：create-vue（官方推荐）

💡 基于 Vite，速度快，配置简单，内置 Router、Pinia 等常用工具

创建项目

npm create vue@latest
# 或使用 pnpm
pnpm create vue@latest

交互式配置

✔ Project name: … my-vue3-project
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router? … No / Yes
✔ Add Pinia? … No / Yes
✔ Add Vitest? … No / Yes
✔ Add ESLint? … No / Yes
✔ Add Prettier? … No / Yes

启动项目

cd my-vue3-project
npm install
npm run dev

访问 http://localhost:5173 查看项目

方式二：Vite（轻量级）

💡 适合需要自定义配置或多框架项目

创建项目

# 交互式创建
npm create vite@latest

# 指定模板
npm create vite@latest my-vue3-app -- --template vue      # JavaScript
npm create vite@latest my-vue3-app -- --template vue-ts   # TypeScript

两种方式对比

对比项create-vueVite
推荐度⭐⭐⭐⭐⭐ Vue 官方推荐⭐⭐⭐⭐ 通用工具
配置交互式选择手动安装插件
内置Router、Pinia、测试等仅基础 Vue
场景完整 Vue 项目轻量/多框架
上手开箱即用需手动配置

💡 选择建议：标准 Vue 项目用 create-vue，自定义需求用 Vite

五、快速参考

npm 常用命令

npm init -y                          # 初始化项目
npm install <package>                # 安装依赖
npm install -g <package>             # 全局安装
npm install <package> -D             # 安装开发依赖
npm uninstall <package>              # 卸载依赖
npm update <package>                 # 更新依赖
npm list -g --depth=0                # 查看全局包

Vue3 项目命令

npm create vue@latest                # 创建项目（create-vue）
npm create vite@latest               # 创建项目（Vite）
npm install                          # 安装依赖
npm run dev                          # 启动开发服务器
npm run build                        # 构建生产版本
npm run preview                      # 预览构建
npm run lint                         # 代码检查

六、环境配置清单

✅ 配置完成检查

配置项状态说明
Node.js✅ 已安装运行环境
npm✅ 已配置包管理器 + 国内镜像
环境变量✅ 已配置全局命令可用
版本管理可选nvm（多版本需求）
包管理工具可选pnpm/yarn（性能优化）

🎉 环境配置完成，开始 Vue3 开发之旅吧！

文档版本: v2.0
更新日期: 2025-10-27
适用系统: Windows / macOS / Linux

# node.js # npm
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

2026企业微信AI Agent实测：7款技术方案对比

会话审计、敏感词管理、聊天质检、敏感行为识别、舆情、属性、词频及竞品分析覆盖服务风险；线索公海、客户、产品、商机、订单、回款、发票和业绩目标则连接销售全过程。快创助手负责快速建运营任务，策略生成把目标拆成方案，智能客服回答系统使用咨询，数据报表处理自然语言查数，AI洞察联合标签、订单和会话分析客户。我们设计了客户筛选、订单关联、销售交接、会话质检和异常恢复任务，配合技术访谈与行业公开资料复核。准备

avatar AI Agent技术社区
cover

AI Agent 对比和选型

avatar AI Agent技术社区
cover

如何构建 AI Agent Harness 2.0，让 AI Agent 比 99% 的开发者更工程化

avatar AI Agent技术社区