Vue.js 安装教程：从零开始搭建开发环境
1. 引言
* 1.1 Vue.js 简介
* 什么是 Vue.js？ (渐进式 JavaScript 框架)
* Vue.js 的核心特点 (响应式、组件化、易学易用)
* Vue 2 与 Vue 3 的主要区别简述 (可选，根据目标读者决定侧重)
* 1.2 为什么需要正确的安装？
* 确保开发环境稳定
* 获得最佳开发体验
* 为后续项目开发打好基础
* 1.3 本文目标
* 指导读者完成 Vue.js 开发环境的搭建
* 提供多种安装方式供选择
* 确保读者能成功创建并运行第一个 Vue 应用2. 安装前准备 (环境检查)
* 2.1 必备工具
* **Node.js** 和 **npm** (Node Package Manager)
* 说明其作用 (运行 JavaScript 环境、管理包依赖)
* 如何检查是否已安装：
```bash
node -v
npm -v
```
* 推荐版本 (如 Node.js LTS 版本)
* **代码编辑器或 IDE**
* 推荐选择 (如 VS Code, WebStorm)
* 安装相关 Vue 插件以提升开发效率 (如 Volar)
* 2.2 可选工具
* **yarn** (替代 npm 的包管理器)
* 如何安装
* 基本命令对比 (`npm install` vs `yarn add`)
* **Git** (版本控制)
* 建议安装，方便项目管理
* 2.3 安装 Node.js 和 npm
* 官方网站下载安装包
* 使用包管理器安装 (如 macOS 的 Homebrew, Linux 的 apt/yum)
* 验证安装成功3. 安装 Vue.js 的主要方式
* 3.1 方式一：使用 Vue CLI (官方脚手架 - 推荐)
* **优点**：标准化、功能强大 (项目搭建、插件、配置)
* 3.1.1 全局安装 Vue CLI
```bash
npm install -g @vue/cli
# 或者
yarn global add @vue/cli
```
* 3.1.2 验证 Vue CLI 安装
```bash
vue --version
```
* 3.1.3 创建新项目
```bash
vue create my-vue-project
```
* 交互式选项说明 (选择预设、手动配置项如 Babel, Router, Vuex, Linter 等)
* 3.1.4 进入项目目录并启动开发服务器
```bash
cd my-vue-project
npm run serve
# 或者
yarn serve
```
* 3.1.5 访问应用
* 浏览器打开 `http://localhost:8080` (端口号可能不同)
* 3.2 方式二：使用 Vite (下一代前端工具)
* **优点**：极速的开发服务器启动和热更新
* 3.2.1 创建 Vite + Vue 项目
```bash
npm create vite@latest my-vue-project --template vue
# 或者
yarn create vite my-vue-project --template vue
```
* 选择 Vue 模板 (可选择 Vue 或 Vue + TypeScript)
* 3.2.2 进入项目目录并安装依赖
```bash
cd my-vue-project
npm install
# 或者
yarn
```
* 3.2.3 启动开发服务器
```bash
npm run dev
# 或者
yarn dev
```
* 3.2.4 访问应用
* 浏览器打开 `http://localhost:3000` (端口号可能不同)
* 3.3 方式三：直接引入 CDN (快速原型或简单学习)
* **适用场景**：非工程化项目、快速体验
* 3.3.1 在 HTML 文件中引入 Vue
```html
<!-- 开发环境版本，包含有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 或者 Vue 3 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
```
* 3.3.2 简单的使用示例
```html
<div id="app">{{ message }}</div>
<script>
const app = Vue.createApp({
data() {
return {
message: 'Hello Vue!'
}
}
}).mount('#app')
</script>
```
* **局限性说明**：不适合大型项目、缺乏构建工具支持4. 项目结构初探 (以 Vue CLI 或 Vite 创建的项目为例)
* `package.json`：项目配置和依赖管理
* `node_modules`：存放所有依赖包
* `src/`：源代码目录
* `main.js` / `main.ts`：应用入口文件
* `App.vue`：根组件
* `components/`：存放自定义组件
* `assets/`：存放静态资源 (图片、字体等)
* `public/`：存放无需构建的静态文件
* 其他配置文件 (`vite.config.js`, `.eslintrc`, `babel.config.js` 等)5. 安装后验证
* 5.1 检查开发服务器是否正常运行
* 5.2 浏览器访问默认页面是否显示正确
* 5.3 尝试修改 `App.vue` 中的内容，观察热更新是否生效
* 5.4 运行生产环境构建命令 (可选)
```bash
npm run build
# 或者
yarn build
```
* 查看生成的 `dist/` 目录6. 常见问题解答 (FAQ)
* 安装 `@vue/cli` 时权限错误 (加 `sudo` 或 修改 npm 全局安装路径)
* `npm install` 速度慢或失败 (使用淘宝镜像 `npm config set registry https://registry.npm.taobao.org`)
* `vue` 或 `vite` 命令未找到 (环境变量 PATH 问题)
* 端口被占用 (修改开发服务器端口号)
* 项目创建时选项选择的困惑 (解释常用配置项)
* Vue 2 和 Vue 3 项目创建命令的区别7. 总结
* 回顾主要安装方式及其适用场景
* 强调使用 Vue CLI 或 Vite 是构建现代 Vue 应用的推荐起点
* 鼓励读者开始探索 Vue.js 的世界
* 提供下一步学习建议 (官方文档、教程)8. 附录 (可选)
* Node.js 和 npm 的详细安装指南
* VS Code 推荐插件列表
* Vue Devtools 浏览器扩展的安装和使用