在开始学习 Vue3 编程之前，我们需要先搭建一个合适的开发环境。本章将指导你完成所有必要的安装和配置，为后续的学习打下基础。通过本章学习，你将掌握如何使用最新的 Vite 工具链快速创建和启动 Vue3 项目。

2.1 Node.js 和 npm 安装配置

什么是 Node.js 和 npm

• Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使 JavaScript 可以在浏览器之外运行。
• npm（Node Package Manager）是 Node.js 的包管理工具，用于安装、管理和共享 JavaScript 代码包。

对于 Vue 开发而言，Node.js 和 npm 是必不可少的工具，它们使我们能够：

• 使用现代化的构建工具（如 Vite）
• 安装和管理项目依赖
• 运行开发服务器
• 构建生产版本的应用

Node.js 版本要求

根据 Vue.js 官方文档，创建 Vue 应用需要：

• Node.js 版本 18.3 或更高
• 熟悉命令行操作

安装 Node.js 和 npm

Windows 系统安装步骤

1. 访问 Node.js 官方网站：https://nodejs.org/
2. 下载推荐的 LTS（长期支持）版本（确保版本 ≥ 18.3）
3. 运行下载的安装程序，按照向导完成安装
4. 安装完成后，打开命令提示符（CMD）或 PowerShell
5. 验证安装是否成功：

▼
bash
复制代码
node -v
npm -v

macOS 系统安装步骤

方法一：使用官方安装包

1. 访问 Node.js 官方网站：https://nodejs.org/
2. 下载 macOS 版的 LTS 安装包（确保版本 ≥ 18.3）
3. 运行安装包，按照向导完成安装
4. 打开终端，验证安装：

▼
bash
复制代码
node -v
npm -v

方法二：使用 Homebrew 安装（推荐）

1. 如果尚未安装 Homebrew，请先安装：

▼
bash
复制代码
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. 安装 Node.js：

▼
bash
复制代码
brew install node

3. 验证安装：

▼
bash
复制代码
node -v
npm -v

Linux 系统安装步骤（以 Ubuntu 为例）

1. 更新软件包列表：

▼
bash
复制代码
sudo apt update

2. 使用 NodeSource 仓库安装最新版本：

▼
bash
复制代码
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

3. 验证安装：

▼
bash
复制代码
node -v
npm -v

npm 配置优化

安装 Node.js 后，npm 也会一并安装。为了提高下载速度，可以配置 npm 使用国内镜像源：

▼
bash
复制代码
# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

此外，可以安装一些常用的包管理器：

▼
bash
复制代码
# 安装 pnpm（一个更快、更节省磁盘空间的包管理器）
npm install -g pnpm

# 验证 pnpm 安装
pnpm -v

2.2 使用 create-vue 创建 Vue3 项目（推荐）

什么是 create-vue

create-vue 是 Vue 官方提供的最新项目脚手架工具，基于 Vite 构建。根据 Vue.js 官方文档，这是创建 Vue 单页应用的推荐方式。

create-vue 的主要优势：

• 基于 Vite，启动速度极快
• 支持 TypeScript、JSX、路由、状态管理等可选功能
• 开箱即用的现代化配置
• 官方维护，与 Vue3 深度集成

创建 Vue3 项目

使用以下命令创建新的 Vue3 项目：

▼
bash
复制代码
npm create vue@latest

或者使用其他包管理器：

▼
bash
复制代码
# 使用 pnpm（推荐，速度更快）
pnpm create vue@latest

# 使用 yarn
yarn create vue@latest

# 使用 bun
bun create vue@latest

项目配置选项

运行命令后，会出现交互式提示，让你选择需要的功能特性：

▼
plain
复制代码
✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

推荐的初学者配置：

• Project name: 输入你的项目名称
• Add TypeScript? No（初学者建议先使用 JavaScript）
• Add JSX Support? No
• Add Vue Router? Yes（学习路由管理）
• Add Pinia? Yes（学习状态管理）
• Add Vitest? No（后续可以添加）
• Add End-to-End Testing? No
• Add ESLint? Yes（代码质量检查）
• Add Prettier? Yes（代码格式化）
• Add Vue DevTools 7? Yes（调试工具）

启动项目

项目创建完成后，按照提示安装依赖并启动开发服务器：

▼
bash
复制代码
cd <your-project-name>
npm install
npm run dev

或者使用 pnpm：

▼
bash
复制代码
cd <your-project-name>
pnpm install
pnpm run dev

启动成功后，你可以在浏览器中访问 http://localhost:5173 查看你的 Vue3 应用。

生产构建

当你准备部署应用到生产环境时，运行构建命令：

▼
bash
复制代码
npm run build

这将在项目的 ./dist 目录中创建生产就绪的构建文件。

2.3 了解 Vite 构建工具

什么是 Vite

Vite（法语中"快"的意思）是 Vue 团队开发的下一代前端构建工具，现在已经成为 Vue3 项目的默认构建工具。当你使用 create-vue 创建项目时，Vite 就已经自动集成在其中了。

Vite 的主要特点：

• 极快的启动速度：无需打包，直接利用浏览器的 ES 模块功能
• 即时热更新：修改代码后，页面几乎立即更新，无需刷新
• 优化的构建：生产环境使用 Rollup 进行高效打包
• 开箱即用：内置支持 TypeScript、JSX、CSS 预处理器等

create-vue 项目结构

使用 create-vue 创建的项目具有以下结构：

▼
plain
复制代码
my-vue3-app/
├── public/          # 静态资源目录
│   └── favicon.ico  # 网站图标
├── src/             # 源代码目录
│   ├── assets/      # 资源文件（图片、样式等）
│   ├── components/  # Vue 组件
│   ├── router/      # 路由配置（如果选择了 Vue Router）
│   ├── stores/      # 状态管理（如果选择了 Pinia）
│   ├── views/       # 页面组件
│   ├── App.vue      # 根组件
│   └── main.js      # 入口文件
├── index.html       # HTML 模板
├── package.json     # 项目配置和依赖
├── vite.config.js   # Vite 配置文件
├── .eslintrc.cjs    # ESLint 配置（如果选择了 ESLint）
├── .prettierrc.json # Prettier 配置（如果选择了 Prettier）
└── README.md        # 项目说明

Vite 开发体验

Vite 提供了出色的开发体验：

1. 快速启动：

▼
bash
复制代码
npm run dev

开发服务器通常在 1 秒内启动完成。

2. 热模块替换（HMR）：
   • 修改 Vue 组件时，页面会立即更新，保持组件状态
   • 修改 CSS 时，样式会即时应用，无需页面刷新
3. 错误提示：
   • 在浏览器中直接显示编译错误
   • 提供清晰的错误位置和修复建议

常用的 Vite 命令

在 create-vue 创建的项目中，你会用到这些命令：

▼
bash
复制代码
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 预览生产构建
npm run preview

# 运行代码检查（如果配置了 ESLint）
npm run lint

# 运行单元测试（如果配置了 Vitest）
npm run test:unit

Vite 配置文件

vite.config.js 是 Vite 的配置文件，基本配置如下：

▼
javascript
复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173, // 开发服务器端口
    open: true  // 启动时自动打开浏览器
  },
  build: {
    outDir: 'dist' // 构建输出目录
  }
})

Vite 的优势

相比传统构建工具，Vite 具有显著优势：

1. 开发效率：启动速度提升 10-100 倍
2. 现代化：原生支持 ES 模块，无需复杂配置
3. 插件生态：丰富的插件系统，易于扩展
4. TypeScript 友好：原生 TypeScript 支持，无需额外配置

2.4 Vue DevTools 安装与使用

什么是 Vue DevTools

Vue DevTools 是 Vue 官方提供的浏览器扩展，为 Vue 应用提供了强大的调试功能。对于 Vue3 开发，它是必不可少的调试工具。

Vue DevTools 可以帮助你：

• 检查组件树：查看完整的组件层次结构
• 调试组件状态：实时查看和编辑 props、data、computed 等
• 监控事件：跟踪组件间的事件传递
• 路由调试：检查 Vue Router 的路由状态和历史
• 状态管理：查看和修改 Pinia/Vuex 状态
• 性能分析：识别性能瓶颈和优化机会

安装 Vue DevTools

浏览器扩展（推荐）

Vue DevTools 支持主流浏览器：

Chrome 浏览器：

1. 访问 Chrome Web Store
2. 点击"添加至 Chrome"

Firefox 浏览器：

1. 访问 Firefox Add-ons
2. 点击"添加到 Firefox"

Edge 浏览器：

1. 访问 Edge Add-ons
2. 点击"获取"

独立应用（可选）

如果你使用其他浏览器或需要独立的调试应用，可以安装桌面版：

▼
bash
复制代码
npm install -g @vue/devtools
vue-devtools

在 create-vue 项目中启用 DevTools

如果你在创建项目时选择了"Add Vue DevTools 7 extension"，DevTools 支持已经自动配置。如果没有选择，可以手动添加：

▼
bash
复制代码
npm install -D vite-plugin-vue-devtools

然后在 vite.config.js 中添加插件：

▼
javascript
复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueDevTools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    vue(),
    VueDevTools()
  ]
})

使用 Vue DevTools

打开 DevTools

1. 启动你的 Vue 应用（npm run dev）
2. 在浏览器中打开应用
3. 打开浏览器开发者工具（F12）
4. 找到"Vue"标签页

主要功能面板

1. Components（组件）：
   • 查看组件树结构
   • 检查组件的 props、data、computed、methods
   • 实时编辑组件状态
   • 查看组件的渲染信息
2. Timeline（时间线）：
   • 记录应用的状态变化历史
   • 支持时间旅行调试
   • 可以回到任意时间点的状态
3. Router（路由）：
   • 查看当前路由信息
   • 检查路由历史
   • 调试路由参数和查询字符串
4. Pinia/Vuex（状态管理）：
   • 查看全局状态
   • 监控状态变化
   • 手动修改状态进行测试
5. Events（事件）：
   • 监控组件事件的触发
   • 查看事件的传递路径
6. Performance（性能）：
   • 分析组件渲染性能
   • 识别性能瓶颈

调试技巧

1. 组件高亮：在 DevTools 中选择组件时，页面上对应的元素会高亮显示
2. 在控制台中访问组件：选中组件后，可以在控制台中通过 $vm 访问该组件实例
3. 状态修改：可以直接在 DevTools 中修改组件状态，立即看到效果
4. 过滤组件：使用搜索功能快速定位特定组件
5. 导出状态：可以导出当前状态用于测试或分享

2.5 编辑器配置与推荐插件

为了高效开发 Vue3 应用，选择和配置一个好的代码编辑器至关重要。根据 Vue.js 官方文档，推荐使用 Visual Studio Code + Vue - Official 扩展。

推荐编辑器：Visual Studio Code

Visual Studio Code（VS Code）是目前最受欢迎的 Vue 开发编辑器，它免费、轻量且功能强大。

安装 VS Code：

1. 访问 VS Code 官网
2. 下载并安装适合你操作系统的版本

必备 VS Code 插件

为了更好地开发 Vue3 应用，推荐安装以下插件：

1. Vue - Official（必装）

这是 Vue 官方推荐的插件，提供了完整的 Vue3 开发支持：

• 插件 ID：Vue.volar
• 功能：
  • Vue3 语法高亮和智能提示
  • TypeScript 完整支持
  • 组件自动补全
  • Template 类型检查
  • 支持 <script setup> 语法

2. ESLint（代码质量）

• 插件 ID：dbaeumer.vscode-eslint
• 功能：
  • 实时检查代码问题
  • 自动修复常见错误
  • 与项目的 ESLint 配置集成

3. Prettier（代码格式化）

• 插件 ID：esbenp.prettier-vscode
• 功能：
  • 自动格式化代码
  • 保持代码风格一致
  • 支持保存时自动格式化

4. Auto Rename Tag

• 插件 ID：formulahendry.auto-rename-tag
• 功能：
  • 自动重命名成对的 HTML/Vue 标签
  • 提高开发效率

5. Bracket Pair Colorizer

• 插件 ID：CoenraadS.bracket-pair-colorizer-2
• 功能：
  • 给括号对添加颜色
  • 更容易识别代码结构

6. Path Intellisense

• 插件 ID：christian-kohler.path-intellisense
• 功能：
  • 文件路径自动补全
  • 减少路径输入错误

VS Code 配置建议

在 VS Code 的 settings.json 中添加以下配置，可以提升 Vue 开发体验：

▼
json
复制代码
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "emmet.includeLanguages": {
    "vue": "html"
  },
  "files.associations": {
    "*.vue": "vue"
  },
  "[vue]": {
    "editor.defaultFormatter": "Vue.volar"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

一键安装插件

你也可以创建一个 .vscode/extensions.json 文件在项目根目录，推荐团队成员安装相同的插件：

▼
json
复制代码
{
  "recommendations": [
    "Vue.volar",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense"
  ]
}

其他推荐编辑器

虽然 VS Code 是最受欢迎的选择，但还有其他编辑器也适合 Vue 开发：

1. WebStorm：JetBrains 的付费 IDE，内置完整的 Vue 支持
2. Vim/Neovim：配合相应插件，适合喜欢命令行的开发者
3. Sublime Text：轻量快速，需要安装插件支持 Vue

总结

本章我们学习了如何搭建现代化的 Vue3 开发环境，包括：

1. Node.js 环境：推荐安装 Node.js 20+ 和 npm，这是 Vue3 开发的基础
2. 项目创建：使用官方推荐的 create-vue 脚手架创建 Vue3 项目
3. Vite 构建工具：了解基于 Vite 的现代化构建系统，享受极快的开发体验
4. 调试工具：安装和配置 Vue DevTools，掌握强大的调试功能
5. 编辑器配置：配置 VS Code 和 Vue - Official 插件，获得最佳的开发体验

与传统的 Vue CLI 相比，现在的 create-vue + Vite 方案提供了：

• 更快的项目启动速度（毫秒级 vs 秒级）
• 即时的热模块替换
• 开箱即用的 TypeScript、路由、状态管理支持
• 更好的开发者体验

完成这些步骤后，你已经拥有了一个高效、现代化的 Vue3 开发环境。接下来，我们将正式开始学习 Vue3 的基本语法和概念。

快速回顾命令：

▼
bash
复制代码
# 创建新项目
npm create vue@latest my-project

# 进入项目目录
cd my-project

# 安装依赖
npm install

# 启动开发服务器
npm run dev