第1章 前端基础与环境搭建

第1节：开发环境准备

在开始Vue.js学习之前，我们需要搭建一个完整的开发环境。一个良好的开发环境可以极大地提高我们的开发效率和学习体验。

1.1.1 Node.js安装与版本管理（nvm使用）

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

Windows系统安装nvm

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

nvm --version

Mac/Linux系统安装nvm

使用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

使用nvm安装Node.js

安装最新稳定版Node.js：

nvm install --lts

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

nvm list

使用特定版本的Node.js：

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

1.1.2 npm vs yarn vs pnpm包管理器对比

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

安装yarn

npm install -g yarn

安装pnpm

npm install -g pnpm

1.1.3 VS Code编辑器配置

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

安装Volar扩展

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

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

安装Vue VSCode Snippets

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

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

安装ESLint和Prettier

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

# 安装ESLint
npm install -g eslint

# 安装Prettier
npm install -g prettier

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

• ESLint
• Prettier - Code formatter

1.1.4 浏览器开发者工具专项学习

Vue Devtools安装与使用

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

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

元素检查与调试技巧

1. 元素检查：使用"Elements"标签页查看和修改DOM元素
2. 控制台调试：使用"Console"标签页执行JavaScript代码和查看日志
3. 网络请求：使用"Network"标签页查看HTTP请求和响应
4. 性能分析：使用"Performance"标签页分析应用性能

1.1.5 Git基础与GitHub仓库创建

Git是版本控制系统，用于管理项目代码。

安装Git

访问Git官网下载并安装Git。

验证安装成功：

git --version

配置Git

# 配置用户名
git config --global user.name "你的用户名"

# 配置邮箱
git config --global user.email "你的邮箱"

创建GitHub仓库

1. 访问GitHub并登录
2. 点击右上角"+"号，选择"New repository"
3. 填写仓库信息，点击"Create repository"
4. 按照提示将本地项目推送到GitHub

本章小结

在本节中，我们学习了Vue.js开发前的环境准备，包括：

• Node.js安装与版本管理（nvm使用）
• npm、yarn和pnpm包管理器对比
• VS Code编辑器配置
• 浏览器开发者工具专项学习
• Git基础与GitHub仓库创建

有了这些基础环境，我们就可以开始创建第一个Vue项目了。