环境搭建

在开始Vue3开发之前，你需要搭建好开发环境，包括安装Node.js、npm/pnpm等。本章节将指导你完成环境搭建的全过程。

Node.js 安装

1. 什么是Node.js？

Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它允许你在服务器端运行JavaScript代码。Vue3的开发和构建都依赖于Node.js。

2. 下载Node.js

• 官方网站：https://nodejs.org/
• 版本选择：
  • LTS版本：长期支持版，推荐用于生产环境
  • Current版本：最新版本，包含最新特性

3. 安装Node.js

• Windows：运行下载的.msi安装程序，按照提示完成安装
• macOS：
  • 方法1：运行下载的.pkg安装程序
  • 方法2：使用Homebrew安装：brew install node
• Linux：
  • 使用包管理器安装，如Ubuntu：sudo apt install nodejs npm
  • 或使用nvm（Node Version Manager）安装

4. 验证安装

打开终端，运行以下命令验证Node.js和npm是否安装成功：

# 查看Node.js版本
node -v

# 查看npm版本
npm -v

如果显示版本号，则表示安装成功。

npm 配置

1. 什么是npm？

npm（Node Package Manager）是Node.js的包管理器，用于管理项目依赖。

2. 升级npm

安装Node.js后，npm会自动安装，但可能不是最新版本。可以通过以下命令升级npm：

npm install -g npm@latest

3. 配置npm镜像

由于网络原因，npm默认的官方镜像可能速度较慢，可以配置为国内镜像：

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

# 验证配置
npm config get registry

pnpm 安装

1. 什么是pnpm？

pnpm是一个快速、节省磁盘空间的Node.js包管理器，它使用硬链接和符号链接来减少依赖的重复安装。

2. 安装pnpm

# 使用npm安装pnpm
npm install -g pnpm

# 验证安装
pnpm -v

3. 配置pnpm镜像

# 配置淘宝镜像
pnpm config set registry https://registry.npmmirror.com

# 验证配置
pnpm config get registry

其他包管理器

1. yarn

• 安装：npm install -g yarn
• 配置镜像：yarn config set registry https://registry.npmmirror.com

2. 选择建议

• 初学者：可以使用npm，它是Node.js默认的包管理器
• 追求速度：推荐使用pnpm，它的安装速度更快，磁盘空间占用更小
• 团队协作：根据团队的统一规范选择

环境变量配置

1. Windows

• 打开环境变量设置：右键"此电脑" > 属性 > 高级系统设置 > 环境变量
• 编辑PATH：确保Node.js的安装路径已添加到PATH环境变量中

2. macOS/Linux

• 编辑配置文件：在~/.bashrc、~/.zshrc等文件中添加Node.js的安装路径
• 刷新配置：运行source ~/.bashrc或source ~/.zshrc

验证环境

运行以下命令验证环境是否配置正确：

# 查看Node.js版本
node -v

# 查看npm版本
npm -v

# 查看pnpm版本（如果安装了）
pnpm -v

# 查看yarn版本（如果安装了）
yarn -v

常见问题

1. 权限问题

• Windows：以管理员身份运行命令提示符
• macOS/Linux：使用sudo命令或修改权限

2. 网络问题

• 配置镜像：使用国内镜像源
• 代理设置：如果在公司网络中，可能需要配置代理

3. 版本冲突

• 使用nvm：管理多个Node.js版本
• 清理缓存：npm cache clean --force

环境搭建完成

环境搭建完成后，你就可以开始创建Vue3项目了。在后续的章节中，我们将学习如何使用create-vue或Vite创建Vue3项目。

正确的环境配置是Vue3开发的基础，确保你的环境搭建正确，将使后续的开发过程更加顺利。