第一阶段：Vue 基础入门（第 2 天）

Vue 环境搭建全流程：从 Node.js 安装到第一个 Vue 项目运行

作为专业智能创作助手，我将为您详细介绍 Vue 环境搭建的全过程。本指南基于第 2 天的核心知识点，帮助您逐步完成从安装 Node.js 到运行第一个 Vue 项目的完整流程。内容结构清晰，分为核心知识点讲解、案例代码描述和总结要点三部分。所有命令行操作均模拟真实场景，使用中文描述输出结果。

一、核心知识点详解

Node.js 与 npm 的作用

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，允许在服务器端运行 JavaScript 代码。npm（Node Package Manager）是 Node.js 的包管理工具，用于安装、更新和管理 JavaScript 库和框架。在 Vue 开发中，Node.js 提供运行环境，npm 用于安装 Vue 相关依赖。
Node.js 的安装步骤

安装 Node.js 是环境搭建的基础，包括以下步骤：
- 下载：访问 Node.js 官网（https://nodejs.org/），下载适用于您操作系统的安装包（推荐 LTS 版本）。
- 安装：运行下载的安装包，按照向导完成安装（Windows 用户选择默认选项；macOS/Linux 用户可使用包管理器）。
- 环境变量配置：安装过程中，Node.js 会自动配置环境变量，确保命令行可直接访问 node 和 npm 命令。
- 版本验证 ：安装完成后，打开命令行工具（如 Terminal 或 CMD），运行以下命令验证版本：
  复制代码
```
node -v
npm -v
```
  输出应显示版本号，例如：v18.12.1 和 8.19.2，表示安装成功。
Vue CLI 的安装

Vue CLI 是 Vue 的官方脚手架工具，用于快速创建和管理 Vue 项目。安装步骤如下：
- 通过 npm 全局安装 Vue CLI：
  复制代码
```
npm install -g @vue/cli
```
  此命令可能需要管理员权限（在 Linux/macOS 中加 sudo）。
- 安装完成后，验证版本：
  复制代码
```
vue --version
```
  输出应显示类似 @vue/cli 5.0.8 的版本号。
使用 Vue CLI 创建第一个 Vue 项目

创建项目是核心步骤，涉及命令行操作和项目结构：
- 命令行操作 ：在命令行中运行创建命令，例如：
  复制代码
```
vue create my-first-vue-project
```
  创建过程中，CLI 会提示选择预设配置（推荐选择默认选项）。
- 项目目录结构初步介绍 ：创建成功后，项目目录包括：
  - node_modules/：存储依赖包。
  - public/：存放静态资源如 HTML 文件。
  - src/：源代码目录，包含 main.js（入口文件）和 App.vue（根组件）。
  - package.json：定义项目依赖和脚本命令。
启动 Vue 项目

项目创建后，启动并访问：
- 进入项目目录：
  复制代码
```
cd my-first-vue-project
```
- 运行启动命令：
  复制代码
```
npm run serve
```
  命令行输出会显示开发服务器已启动，例如：
  复制代码
```
App running at:
- Local:   http://localhost:8080/
```
- 访问项目：在浏览器中输入 http://localhost:8080，即可看到默认的 Vue 欢迎页面。

二、案例代码描述

由于我无法提供实际截图，以下用文字描述命令和预期输出，模拟真实操作场景。

Node.js 安装成功验证

运行命令：
复制代码
```
node -v
```
输出示例：v18.12.1（表示 Node.js 版本）。

运行命令：
复制代码
```
npm -v
```
输出示例：8.19.2（表示 npm 版本）。
Vue CLI 安装及验证

安装命令：
复制代码
```
npm install -g @vue/cli
```
安装过程输出示例：显示进度条和成功消息。

验证命令：
复制代码
```
vue --version
```
输出示例：@vue/cli 5.0.8。
创建项目和启动命令

创建项目命令：
复制代码
```
vue create my-first-vue-project
```
输出示例：提示选择配置，完成后显示"Successfully created project my-first-vue-project"。

启动项目命令：
复制代码
```
cd my-first-vue-project
npm run serve
```
输出示例：显示开发服务器地址和端口。

三、总结要点

回顾环境搭建的关键步骤，帮助您掌握完整流程：

关键步骤回顾 ：
1. 安装 Node.js 并验证版本。
2. 全局安装 Vue CLI。
3. 使用 Vue CLI 创建新项目。
4. 进入项目目录并启动开发服务器。
常见问题解决方法 ：
- 权限不足 ：在 Linux/macOS 中，使用 sudo npm install -g @vue/cli 解决。
- 版本冲突 ：确保 Node.js 版本兼容（推荐 LTS 版本），可通过 nvm（Node Version Manager）管理多版本。
- 安装失败 ：检查网络连接，或运行 npm cache clean --force 后重试。
学习目标：通过本流程，您已掌握从环境安装到项目运行的完整基础，为后续 Vue 开发（如组件编写和状态管理）打下坚实基础。建议动手实践，加深理解。

完成环境搭建后，您可以开始探索 Vue 的核心概念。如有疑问，欢迎继续提问！