第一部分：Vue 3 基础入门

第2集：现代化前端开发环境配置

一个良好的开发环境是高效开发的基础。在本集中，我们将学习如何配置一个现代化的Vue 3开发环境，包括Node.js安装、包管理器选择、VS Code编辑器配置等。

2.1 Node.js安装与版本管理

Node.js是Vue 3开发的基础，它提供了JavaScript的运行环境和包管理工具。我们可以使用nvm（Node Version Manager）来管理多个Node.js版本。

2.1.1 安装nvm

Windows系统：

1. 访问nvm-windows下载最新版本的nvm-setup.exe
2. 运行安装程序，按照向导完成安装
3. 打开命令提示符或PowerShell，验证安装成功：

   nvm --version

Mac/Linux系统：
使用curl或wget安装：

# 使用curl
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# 使用wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

安装完成后，重启终端并验证：

nvm --version

2.1.2 安装Node.js

安装最新稳定版Node.js：

nvm install --lts

查看已安装的Node.js版本：

nvm list

使用特定版本的Node.js：

nvm use 20.10.0  # 替换为你安装的版本号

2.2 包管理器选择

包管理器用于管理项目依赖，Vue 3项目中常用的包管理器有npm、yarn和pnpm。

2.2.1 包管理器对比

2.2.2 安装额外的包管理器

安装yarn：

npm install -g yarn

安装pnpm：

npm install -g pnpm

2.3 VS Code编辑器配置

VS Code是Vue 3开发的首选编辑器，我们需要安装一些必要的扩展来提高开发效率。

2.3.1 安装Volar扩展

Volar是Vue 3的官方扩展，提供了语法高亮、智能提示和调试功能。

1. 打开VS Code
2. 点击左侧扩展图标（或按Ctrl+Shift+X）
3. 搜索"Volar"并安装

2.3.2 安装TypeScript Vue Plugin

为了获得更好的TypeScript支持，我们需要安装TypeScript Vue Plugin：

1. 在扩展市场搜索"TypeScript Vue Plugin"并安装
2. 重启VS Code

2.3.3 安装Vue VSCode Snippets

提供Vue代码片段，快速生成常用代码结构：

1. 在扩展市场搜索"Vue VSCode Snippets"并安装
2. 重启VS Code

2.3.4 安装ESLint和Prettier

ESLint用于代码质量检查，Prettier用于代码格式化：

# 安装ESLint
npm install -g eslint

# 安装Prettier
npm install -g prettier

在VS Code中安装对应的扩展：

• ESLint
• Prettier - Code formatter

2.4 浏览器开发者工具

2.4.1 安装Vue Devtools

Vue Devtools是Vue开发的必备工具，用于调试Vue应用：

1. 访问Vue Devtools下载对应浏览器的扩展
2. 安装完成后，打开任意Vue应用，在开发者工具中会出现"Vue"标签页

2.4.2 浏览器推荐

推荐使用以下浏览器进行Vue开发：

• Google Chrome：最佳的开发者工具支持
• Microsoft Edge：基于Chromium，支持Chrome扩展
• Firefox：良好的开发者工具和隐私保护

本集小结

在本集中，我们学习了如何配置现代化的Vue 3开发环境：

• Node.js安装与版本管理：使用nvm管理多个Node.js版本
• 包管理器选择：了解npm、yarn和pnpm的区别，选择适合自己的包管理器
• VS Code编辑器配置：安装Volar、TypeScript Vue Plugin、Vue VSCode Snippets、ESLint和Prettier等扩展
• 浏览器开发者工具：安装Vue Devtools，选择合适的浏览器

有了这些基础环境，我们就可以开始创建第一个Vue 3项目了。在下一集中，我们将学习Vite和Webpack的深度对比，以及如何使用Vite创建Vue 3项目。