Node.js安装与环境配置

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，是开发 Vue3 项目的前置要求。本文档将介绍在不同操作系统下安装和配置 Node.js 的详细步骤。

版本选择

  • LTS（长期支持版本）：推荐用于生产环境，稳定性高，支持周期长
  • Current（当前版本）：包含最新特性，但可能不够稳定

建议使用 LTS 版本，目前推荐 Node.js 18.x 或 20.x 版本。

Windows下安装Node.js

方法一：官方安装包（推荐）

  1. 下载安装包

    • 访问 Node.js 官网
    • 选择 LTS 版本下载 Windows 安装包（.msi 文件）

  2. 运行安装程序

    • 双击下载的 .msi 安装包
    • 按照安装向导提示操作
    • 重要：勾选 "Automatically install the necessary tools" 选项，会自动安装 npm 和必要的工具

  3. 验证安装 打开 PowerShell 或 CMD，执行以下命令：

node -v
npm -v

如果显示版本号，说明安装成功。

如果CMD执行指令没问题,PowerShell中执行报错,需要更改powershell执行指令策略 HSV

  • Restricted（默认策略） :禁止运行所有脚本文件（.ps1）

  • AllSigned :要求所有脚本和配置文件必须由受信任的发布者签名

  • RemoteSigned :本地脚本无需签名，但从互联网下载的脚本必须签名

  • Unrestricted :允许运行所有脚本，但对下载的脚本会发出警告

  • Bypass :允许运行所有脚本，但对下载的脚本会发出警告

#查看当前策略
Get-ExecutionPolicy


#设置策略
Set-ExecutionPolicy RemoteSigned

如果设置RemoteSigned还不行，就设置Bypass策略

方法二：使用 NVM（Node Version Manager）

NVM 可以方便地管理多个 Node.js 版本，适合需要切换不同版本的项目。

  1. 下载 NVM for Windows

  2. 安装 NVM

    • 运行安装程序，按照提示完成安装
    • 安装完成后重启命令行工具

  3. 使用 NVM 安装 Node.js

# 查看可用的 Node.js 版本
nvm list available

# 安装指定版本的 Node.js（例如：安装 20.11.0）
nvm install 20.11.0

# 使用指定版本
nvm use 20.11.0

# 查看已安装的版本
nvm list

# 设置默认版本
nvm alias default 20.11.0

环境变量配置

Windows 安装包通常会自动配置环境变量，如果没有自动配置，需要手动添加：

  1. 右键"此电脑" → "属性" → "高级系统设置" → "环境变量"
  2. 在"系统变量"中找到 Path，点击"编辑"
  3. 添加 Node.js 安装路径（通常是 C:\Program Files\nodejs\）
  4. 点击"确定"保存

Linux下安装Node.js

方法一：使用包管理器安装

Ubuntu/Debian

# 更新软件包列表
sudo apt update

# 安装 Node.js 和 npm
sudo apt install nodejs npm

# 验证安装
node -v
npm -v

注意：通过 apt 安装的版本可能较旧，建议使用 NodeSource 仓库安装最新版本。

使用 NodeSource 仓库（推荐）

# 安装 Node.js 20.x LTS
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
sudo apt-get install -y nodejs

# 验证安装
node -v
npm -v

CentOS/RHEL

# 安装 Node.js 20.x LTS
curl -fsSL https://rpm.nodesource.com/setup_20.x | sudo bash -
sudo yum install -y nodejs

# 验证安装
node -v
npm -v

方法二：使用 NVM（推荐）

NVM 是 Linux/Mac 下最流行的 Node.js 版本管理工具。

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

# 或者使用 wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
  1. 配置环境变量

安装完成后，需要重新加载 shell 配置：

# 重新加载配置
source ~/.bashrc
# 或者
source ~/.zshrc
  1. 使用 NVM 管理 Node.js
# 查看可用的 Node.js 版本
nvm list-remote

# 安装指定版本（例如：安装 20.11.0）
nvm install 20.11.0

# 使用指定版本
nvm use 20.11.0

# 查看已安装的版本
nvm list

# 设置默认版本
nvm alias default 20.11.0

# 查看当前使用的版本
nvm current

方法三：从源码编译安装

# 下载源码
wget https://nodejs.org/dist/v20.11.0/node-v20.11.0.tar.gz
tar -xzf node-v20.11.0.tar.gz
cd node-v20.11.0

# 编译安装
./configure
make
sudo make install

# 验证安装
node -v
npm -v

macOS下安装Node.js

方法一：官方安装包

  1. 访问 Node.js 官网
  2. 下载 macOS 安装包（.pkg 文件）
  3. 双击安装包，按照提示完成安装

方法二：使用 Homebrew（推荐）

# 安装 Homebrew（如果未安装）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# 使用 Homebrew 安装 Node.js
brew install node

# 验证安装
node -v
npm -v

方法三：使用 NVM

安装步骤与 Linux 相同，参考 Linux 下的 NVM 安装方法。

配置 npm

设置 npm 镜像源（国内用户推荐）

由于网络原因，国内用户建议使用淘宝镜像源：

# 设置淘宝镜像源
npm config set registry https://registry.npmmirror.com

# 验证配置
npm config get registry

# 或者使用 cnpm（推荐）
npm install -g cnpm --registry=https://registry.npmmirror.com

其他常用 npm 配置

# 查看所有配置
npm config list

# 设置全局安装路径（可选）
npm config set prefix ~/npm-global

# 设置缓存路径（可选）
npm config set cache ~/npm-cache

# 设置日志级别
npm config set loglevel warn

包管理器选择

npm（Node Package Manager）

Node.js 自带的包管理器，无需额外安装。

# 初始化项目
npm init

# 安装依赖
npm install

# 安装生产依赖
npm install package-name

# 安装开发依赖
npm install package-name --save-dev

# 全局安装
npm install -g package-name

yarn

Facebook 开发的包管理器，性能更好。

# 安装 yarn
npm install -g yarn

# 初始化项目
yarn init

# 安装依赖
yarn install

# 添加依赖
yarn add package-name

# 添加开发依赖
yarn add package-name --dev

pnpm

快速、节省磁盘空间的包管理器。

# 安装 pnpm
npm install -g pnpm

# 初始化项目
pnpm init

# 安装依赖
pnpm install

# 添加依赖
pnpm add package-name

验证安装

完成安装后，执行以下命令验证：

# 检查 Node.js 版本
node -v

# 检查 npm 版本
npm -v

# 检查 Node.js 安装路径
which node    # Linux/Mac
where node    # Windows

# 检查 npm 安装路径
which npm     # Linux/Mac
where npm     # Windows

创建第一个 Vue3 项目

安装完成后，可以使用以下命令创建 Vue3 项目：

# 使用 npm
npm create vue@latest my-vue-app

# 使用 yarn
yarn create vue my-vue-app

# 使用 pnpm
pnpm create vue my-vue-app

常见问题

1. 权限问题（Linux/Mac）

如果遇到权限错误，可以配置 npm 使用其他目录：

mkdir ~/.npm-global
npm config set prefix '~/.npm-global'

然后在 ~/.bashrc 或 ~/.zshrc 中添加：

export PATH=~/.npm-global/bin:$PATH

2. 版本过旧

如果系统包管理器安装的版本过旧，建议使用 NVM 或从源码安装。

3. 命令未找到

如果提示 node: command not found，检查环境变量配置是否正确。

4. npm 安装慢

使用国内镜像源或使用 cnpm、yarn、pnpm 等替代工具。

总结

  • Windows：推荐使用官方安装包或 NVM for Windows
  • Linux：推荐使用 NVM 或 NodeSource 仓库
  • macOS：推荐使用 Homebrew 或 NVM
  • 建议使用 LTS 版本，确保稳定性
  • 配置国内镜像源可提升下载速度
  • 使用包管理器（npm/yarn/pnpm）管理项目依赖

完成 Node.js 安装后，就可以开始 Vue3 项目的开发了！

最近更新：:
Contributors: Duke