前端环境搭建全攻略（含 nvm、node、npm、vue）

1. 引言

作为一名前端开发者，环境搭建是迈向开发之路的第一步。配置不好，可能会遇到各种版本兼容问题、权限问题甚至“为什么代码跑不起来”的崩溃时刻。今天带你一步步搭建稳定的前端开发环境。

2. 安装 Node.js（使用 nvm 进行管理）

2.1 为什么要用 nvm？

直接安装 Node.js 看似简单，但以后你会发现，项目 A 需要 14.x 版本，项目 B 需要 16.x 版本，项目 C 只能跑在 18.x……你会陷入版本地狱。这时候 nvm（Node Version Manager）就派上用场了，它能让你轻松切换不同的 Node.js 版本。

2.2 安装 nvm

Windows

• 推荐使用 nvm-windows，官方下载地址：https://github.com/coreybutler/nvm-windows/releases
• 安装后，打开终端，运行 nvm -v 确保安装成功。

Mac/Linux

• 使用命令安装：

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  

• 运行 nvm -v 检查是否安装成功。

2.3 安装 Node.js

• 通过 nvm 安装最新 LTS 版本（长期支持版本，推荐用于生产环境）：

  nvm install --lts
  

• 切换到刚安装的版本：

  nvm use --lts
  

• 确保安装成功：

  node -v
  npm -v
  

3. 配置 npm（包管理器）

3.1 设置国内镜像（提升下载速度）

npm 默认使用国外源，下载速度可能感人，建议切换到淘宝镜像：

npm config set registry https://registry.npmmirror.com/

如果使用 yarn，可以这样设置：

yarn config set registry https://registry.npmmirror.com/

3.2 初始化项目

如果你要创建一个新的前端项目，可以运行：

npm init -y

这样会生成 package.json 文件，存储项目信息和依赖包。

4. 安装 Vue.js 开发环境

4.1 安装 Vue CLI

Vue 官方提供了 CLI（命令行工具）来快速搭建项目，安装方式如下：

npm install -g @vue/cli

安装完成后，运行以下命令检查是否成功：

vue --version

4.2 创建 Vue 项目

使用 Vue CLI 创建一个 Vue 2 或 Vue 3 项目：

vue create my-vue-app

然后根据提示选择 Vue 2 或 Vue 3。

如果你想使用 Vite（更快的构建工具），可以使用：

npm create vite@latest my-vite-app
cd my-vite-app
npm install
npm run dev

5. 其他推荐工具

5.1 Yarn / pnpm（替代 npm 的更快方案）

如果觉得 npm 速度慢，可以试试 Yarn 或 pnpm：

npm install -g yarn
npm install -g pnpm

5.2 Vue Devtools（浏览器插件）

Vue 开发必备调试工具：https://devtools.vuejs.org/

6. 结论

环境搭建虽然繁琐，但一旦配置好，就能极大提升开发效率。希望这篇教程能帮助你快速搭建前端环境，避免踩坑！