Vue.js 初学者指南：环境搭建与第一个应用
欢迎来到精彩的 Vue.js 世界！Vue.js 是一款渐进式 JavaScript 框架，用于构建用户界面。它易于上手，性能强大，并且生态系统成熟，是目前前端开发领域最受欢迎的框架之一。如果你是前端开发的初学者，或者已经熟悉其他框架但对 Vue.js 感兴趣，那么这篇文章将带你迈出第一步，从零开始搭建开发环境并创建你的第一个 Vue.js 应用。
本文将详细指导你完成以下几个关键步骤：
- 了解 Vue.js 开发所需的基础环境。
- 安装 Node.js 和 npm（或 yarn/pnpm）。
- 介绍现代 Vue 项目的推荐构建工具：Vite。
- 使用 Vite 创建一个新的 Vue.js 项目。
- 深入理解创建的第一个 Vue.js 应用的项目结构。
- 运行开发服务器并预览你的应用。
- 修改代码，让你对 Vue.js 的基本概念有一个初步的认识。
准备好了吗？让我们开始这段 Vue.js 的学习旅程吧！
第一步：理解所需的基础环境
在深入 Vue.js 的代码之前，我们需要确保你的计算机已经准备好了进行现代前端开发的必要工具。与传统的直接在 HTML 文件中引入 <script src="vue.js"></script> 的方式不同，现代 Vue.js 开发通常依赖于构建工具（Build Tools），这些工具可以帮助我们：
- 使用单文件组件（Single File Components – SFC，即
.vue文件），将 HTML (模板)、JavaScript (逻辑) 和 CSS (样式) 写在同一个文件中，提高了组织性和可维护性。 - 利用模块化开发，方便代码的组织、复用和依赖管理。
- 编译 ES6+、TypeScript、Sass/Less 等高级语言特性。
- 进行代码优化、打包和压缩，以提高应用性能。
- 提供热模块替换（Hot Module Replacement – HMR），让你在修改代码时能即时看到浏览器中的变化，无需手动刷新。
这些构建工具和相关的包管理系统是基于 Node.js 环境运行的。因此，安装 Node.js 是第一步。
第二步：安装 Node.js 和包管理器
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境。它允许你在浏览器之外运行 JavaScript 代码。在前端开发中，Node.js 主要用于运行各种开发工具（如构建工具、打包器、转译器等）以及作为包管理器 npm (Node Package Manager) 的运行环境。
1. 下载和安装 Node.js
前往 Node.js 官方网站：https://nodejs.org/
你会看到两个下载选项：LTS (长期支持版) 和 Current (最新版)。对于初学者和大多数生产环境，强烈建议选择 LTS 版本。它更稳定，经过了更广泛的测试。
根据你的操作系统（Windows, macOS, Linux），下载对应的安装包，并按照安装向导进行安装。安装过程通常很简单，一路点击“下一步”并接受许可协议即可。如果你不确定，可以使用默认安装路径。
2. 验证安装
安装完成后，打开你的终端或命令行工具（在 Windows 上可以使用 PowerShell 或 Command Prompt，在 macOS/Linux 上可以使用 Terminal）。输入以下命令来检查 Node.js 和 npm 是否安装成功：
bash
node -v
npm -v
如果安装成功，这些命令会分别显示 Node.js 和 npm 的版本号。例如：
v18.17.0 (Node.js version)
9.6.7 (npm version)
版本号可能会有所不同，但只要能显示版本信息，就说明安装成功了。
3. 了解包管理器 (npm, yarn, pnpm)
npm 是 Node.js 自带的包管理器，用于安装、管理和发布 JavaScript 包（库和框架）。当你安装 Node.js 时，npm 会自动安装。
除了 npm，还有其他流行的包管理器，如 Yarn 和 pnpm。它们各有优缺点：
- npm: Node.js 官方包管理器，广泛使用，生态系统庞大。
- Yarn: 由 Facebook (现 Meta) 开发，旨在提高安装速度和可靠性，具有一些额外的功能。
- pnpm: 旨在高效利用磁盘空间，通过内容可寻址存储来避免重复安装同一个包，安装速度通常更快。
对于初学者，使用默认的 npm 已经足够了。大多数现代前端项目也提供了针对这三种包管理器的命令支持。在本文后续的步骤中，我们将主要使用 npm 命令。如果你选择使用 Yarn 或 pnpm，对应的命令会有细微差别（例如，npm install 对应 yarn install 或 pnpm install，npm run dev 对应 yarn dev 或 pnpm dev）。
至此，你已经成功搭建了运行 Vue.js 开发环境所需的基础设施。
第三步：引入构建工具 – Vite
在过去，Vue.js 官方推荐使用 Vue CLI (Command Line Interface) 来创建项目。Vue CLI 是一个强大的命令行工具，集成了 Webpack 等构建工具，提供了丰富的插件和配置选项。
然而，随着前端技术的发展，新的构建工具 Vite (法语 “快” 的意思) 异军突起。Vite 由 Vue.js 的作者尤雨溪开发，它利用了浏览器原生的 ES 模块特性，实现了按需编译，使得开发服务器的启动速度和热模块更新速度都非常快，极大地提升了开发体验。
从 Vue 3 开始，Vite 成为了官方推荐的构建工具，用于创建新的 Vue 项目。因此，我们将使用 Vite 来创建我们的第一个 Vue.js 应用。
第四步：使用 Vite 创建 Vue.js 项目
Vite 提供了一个 create-vue 脚手架工具，它是创建 Vue 项目的官方推荐方式。它可以帮助你快速搭建一个基于 Vite 的 Vue 3 项目。
打开你的终端或命令行工具，导航到你想要创建项目的目录。然后运行以下命令：
bash
npm init vue@latest
这个命令会执行 create-vue 脚手架。脚手架会进入一个交互式向导，询问你关于新项目的一些配置选项。对于初学者，我们建议选择一些基础的选项，保持项目的简洁性。
以下是向导可能询问的问题以及对初学者的建议选择：
“`
Need to install the following packages:
create-vue@latest
Ok to proceed? (y) y <– 输入 y 并回车确认安装 create-vueProject name: » vue-first-app <– 输入你的项目名称，这里我们用 vue-first-app，然后回车
Add TypeScript? (y/n) » n <– 初学阶段可以先不使用 TypeScript，输入 n 并回车
Add JSX Support? (y/n) » n <– JSX 用于 React 风格的模板语法，Vue 使用自己的模板语法，输入 n 并回车
Add Vue Router for Single Page Application development? (y/n) » n <– 路由功能，第一个应用不需要，输入 n 并回车
Add Pinia for State Management? (y/n) » n <– 状态管理库，后续会学到，输入 n 并回车
Add Vitest for Unit Testing? (y/n) » n <– 单元测试框架，输入 n 并回车
Add Cypress for End-to-End Testing? (y/n) » n <– 端到端测试框架，输入 n 并回车
Add ESLint for Code Quality? (y/n) » n <– 代码规范和质量检查工具，输入 n 并回车
Add Prettier for Code Formatting? (y/n) » n <– 代码格式化工具，输入 n 并回车
Scaffolded project in D:\Your\Path\To\vue-first-app <– 显示项目创建路径
Done. Now run:
cd vue-first-app
npm install
npm run dev
“`
按照向导的提示，输入相应的字母（y 或 n）并回车。完成向导后，create-vue 会在当前目录下创建一个名为 vue-first-app 的文件夹（或者你输入的项目名称）。
接下来，按照向导最后给出的提示，进入项目目录并安装依赖：
bash
cd vue-first-app
npm install
cd vue-first-app 命令让你进入到刚才创建的项目文件夹中。
npm install 命令会读取项目目录下的 package.json 文件，并下载其中列出的所有项目依赖（包括 Vue 框架本身、Vite 以及其他开发所需的库）到项目目录下的 node_modules 文件夹中。这个过程可能需要一些时间，取决于你的网络速度。
至此，你的第一个 Vue.js 项目已经成功创建并安装了所有必要的依赖！
第五步：理解第一个 Vue.js 应用的项目结构
进入 vue-first-app 目录后，你会看到一个包含了许多文件和文件夹的结构。了解这个结构对于理解项目如何组织至关重要。让我们一起看看主要的目录和文件：
vue-first-app/
├── node_modules/ # 项目依赖的库文件 (由 npm install 生成)
├── index.html # 项目的入口 HTML 文件
├── package.json # 项目配置文件，包含项目信息、依赖列表、脚本命令等
├── package-lock.json # 锁定依赖版本，确保安装版本一致性
├── public/ # 静态资源目录，里面的文件会直接复制到构建输出目录
│ └── vite.svg # 示例 SVG 文件
└── src/ # 源代码目录
├── assets/ # 存放静态资源的目录 (图片、字体等)
│ └── vue.svg # 示例 SVG 文件
├── components/ # 存放可复用 Vue 组件的目录
│ └── HelloWorld.vue # 示例组件
├── App.vue # 根组件，整个应用的主要入口之一
└── main.js # 应用的入口 JavaScript 文件，创建 Vue 应用实例并挂载到 HTML
让我们详细解释几个关键文件：
index.html: 这是应用的唯一 HTML 文件。在单页面应用 (SPA) 中，所有 Vue 组件最终都会被渲染到这个 HTML 文件中的一个特定元素里（通常是一个带有特定 ID 的<div>）。你可以看到其中有一个<div id="app"></div>，这就是 Vue 应用将挂载的地方。注意，这里并没有直接引入 Vue 或其他 JavaScript 文件，这是因为 Vite 会在开发和构建过程中自动处理模块依赖和注入必要的脚本。package.json: 这个文件是项目的“身份证”。它包含了项目的名称、版本、作者信息、许可协议等。最重要的是，它列出了项目的依赖 (dependencies) 和开发依赖 (devDependencies)，以及可以运行的脚本 (scripts)。例如，你会看到"scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }，这些脚本允许你通过npm run dev、npm run build等命令来执行相应的任务。main.js: 这是整个应用的 JavaScript 入口文件。它负责创建 Vue 应用实例 (createApp())，引入根组件 (App.vue)，并将应用挂载到index.html中的#app元素上。如果你使用了 Vue Router 或 Pinia 等库，它们也会在这里被引入和注册。App.vue: 这是应用的根组件。一个 Vue 应用是由一系列组件组成的树形结构，App.vue通常是这棵树的根节点。它里面会包含应用的整体布局或引入其他子组件。.vue文件 (单文件组件 – SFC): 这是 Vue.js 的核心特性之一。一个.vue文件通常包含三个部分：<template>: 定义组件的 HTML 结构和模板语法。<script setup>: 定义组件的 JavaScript 逻辑，使用 Composition API 的<script setup>语法是 Vue 3 的推荐方式，它简化了组件的 setup 函数。<style scoped>: 定义组件的 CSS 样式。scoped属性意味着这些样式只应用于当前组件，不会影响其他组件，从而避免了样式冲突。
通过这种结构，我们可以将一个复杂的页面分解成独立、可维护、可复用的组件，极大地提高了开发效率和项目可管理性。
第六步：运行开发服务器
项目结构已经清晰，依赖也已经安装完毕。现在是时候启动你的第一个 Vue 应用了！
在终端或命令行工具中，确保你还在项目的根目录下 (vue-first-app)，然后运行之前在 package.json 的 scripts 中看到的开发命令：
bash
npm run dev
或者如果你使用了 Yarn 或 pnpm：
“`bash
yarn dev
或者
pnpm dev
“`
运行此命令后，Vite 开发服务器将启动。你会在终端看到类似以下的输出：
“`
[email protected] dev
vite
VITE v4.4.9 ready in 347 ms
➜ Local: http://localhost:5173/
➜ Network: use –host to expose
➜ press h to show help
“`
这表明开发服务器已经在本地的 http://localhost:5173/ 地址上运行起来了（端口号可能有所不同）。
打开你的浏览器，访问终端输出的本地地址（例如：http://localhost:5173/）。
恭喜你！你应该能看到 Vue 官方标志和一个示例页面，其中包含 “You did it!” 字样和一个旋转的 Vue Logo。这是 Vite + Vue 默认生成的第一个应用页面。
这个开发服务器不仅提供了应用预览，还具备强大的热模块替换 (HMR) 功能。这意味着你在 src 目录下的文件进行修改并保存时，浏览器中的应用会立即更新，而无需手动刷新整个页面。这极大地提高了开发效率。
你可以保持开发服务器的运行，然后在你喜欢的代码编辑器中打开 vue-first-app 目录，开始修改代码，体验 Vue.js 的魅力。
第七步：修改代码，初步认识 Vue.js
现在，让我们通过修改代码来初步了解 Vue.js 的一些基本概念，特别是数据绑定和组件。
1. 修改 App.vue
打开 src/App.vue 文件。这是一个单文件组件 (SFC)。它的结构分为 <script setup>, <template>, 和 <style scoped> 三个部分。
初始的 App.vue 可能引入并使用了 HelloWorld 组件。我们先简化它，自己添加一些内容。
将 src/App.vue 的内容修改为以下代码：
“`vue
{{ message }}
Count: {{ counter }}
这是一个带有动态 class 的段落
```
保存 App.vue 文件。观察浏览器，Vite 的热模块替换会立即更新页面。你应该能看到：
- 一个绿色的标题显示 "Hello, Vue 3!"
- 一个段落显示 "Count: 0"
- 两个按钮："Increment" 和 "Change Message"
解释代码：
<script setup>: 这是 Composition API 的语法糖。在其中，你可以直接使用import导入函数（如ref），声明变量（使用const或let），声明函数。使用ref()创建的变量是“响应式”的。这意味着当这些变量的值发生变化时，任何使用了它们的地方（在模板中）都会自动更新。访问或修改ref的值需要通过.value属性（例如counter.value++）。<template>: 这里的代码看起来像 HTML，但它是 Vue 的模板语法。{{ message }}和{{ counter }}: 这是文本插值。双大括号内的表达式会被替换为script中对应响应式数据的值。当message或counter的值改变时，这里显示的内容会自动更新。这是 Vue 最基本的数据绑定方式。<button @click="increment">:@click是v-on:click的简写，用于监听 DOM 事件。当按钮被点击时，会执行script中定义的increment函数。<button @click="changeMessage">: 同样，点击此按钮会执行changeMessage函数。<p :class="'dynamic-class'">::是v-bind:的简写，用于绑定 HTML 属性。这里:class="'dynamic-class'"意思是将这个p元素的class属性绑定到一个表达式的值。虽然在这个简单的例子中，直接写class="dynamic-class"效果一样，但v-bind的强大之处在于它可以绑定到响应式数据，实现属性的动态变化。
<style scoped>: 定义组件的样式。scoped确保这些样式只应用到当前.vue文件模板中的元素上，防止样式全局污染。
通过这个简单的例子，你已经接触了 Vue.js 的几个核心概念：
- 响应式数据 (
ref): 数据变化可以自动更新视图。 - 文本插值 (
{{ }}): 将数据渲染到模板中。 - 事件绑定 (
v-on或@): 响应用户交互，触发 JavaScript 方法。 - 属性绑定 (
v-bind或:): 动态设置 HTML 元素的属性。 - 单文件组件 (SFC): 将模板、脚本、样式组织在一起。
尝试点击按钮，观察 counter 和 message 的变化。这就是 Vue 响应式系统的魅力所在！
2. 理解并使用子组件
在最初 Vite 创建的项目中，App.vue 引入并使用了 src/components/HelloWorld.vue 组件。这展示了组件化开发的思想。一个应用可以由多个更小、更独立的组件构成。
打开 src/components/HelloWorld.vue 文件。它也是一个 SFC，定义了自己的模板、脚本和样式。
注意到在 HelloWorld.vue 的 <script setup> 中可能有这样的代码：
```vue
{{ msg }}
Edit
components/HelloWorld.vue to test HMR
... 更多模板内容 ...
```
在 App.vue 中，如果它使用了 HelloWorld 组件，代码可能类似这样：
```vue
```
解释：
- 导入子组件: 在父组件 (
App.vue) 的<script setup>中，使用import语句导入子组件 (HelloWorld.vue)。 - 声明 Props (
defineProps): 在子组件 (HelloWorld.vue) 的<script setup>中，使用defineProps宏来声明这个组件可以接受哪些属性 (props)。props是父组件向子组件传递数据的方式。这里声明了一个名为msg的 prop，类型为 String，并且是必需的。 - 在模板中使用 Props: 在子组件的
<template>中，可以直接使用通过defineProps声明的 props（如{{ msg }}），就像使用本地响应式数据一样。 - 传递 Props: 在父组件 (
App.vue) 的<template>中使用子组件时，可以通过类似 HTML 属性的方式来传递 props。:或v-bind:用于绑定动态值，例如:msg="'Hello from App.vue!'"或简写为:msg="'...'"。如果传递的是一个静态字符串，也可以直接写msg="静态字符串"。
通过组件化，你可以将应用分解成可管理的、独立的单元。每个组件负责自己的逻辑和 UI，并通过 props 进行父子组件之间的通信。
第八步：构建生产环境应用
当你完成了开发，准备将应用部署到服务器上供用户访问时，你需要构建应用的生产版本。生产版本通常经过优化，文件更小，加载更快。
在终端中，确保在项目根目录下，运行构建命令：
bash
npm run build
或者如果你使用了 Yarn 或 pnpm：
```bash
yarn build
或者
pnpm build
```
Vite 会执行构建过程，将你的 Vue 单文件组件编译、打包、压缩，生成用于生产环境的静态文件。构建完成后，你会在项目根目录下看到一个名为 dist/ 的文件夹。
dist/ 文件夹包含了所有用于部署的静态文件：index.html、编译后的 JavaScript 文件、CSS 文件以及静态资源。这些文件可以直接部署到任何静态文件服务器上（如 Nginx, Apache），或者使用 Netlify, Vercel, GitHub Pages 等静态网站托管服务。
你可以使用一个简单的本地静态文件服务器来测试 dist 文件夹的内容。例如，可以使用 npm 全局安装一个 serve 包：
bash
npm install -g serve
然后进入 dist 目录并运行 serve：
bash
cd dist
serve
这会在本地启动一个静态服务器，你可以通过浏览器访问其提供的地址来预览生产版本的应用。
第九步：下一步学习方向
恭喜你！你已经成功地搭建了 Vue.js 开发环境，创建了第一个应用，了解了基本的项目结构和核心概念，并学会了如何运行开发服务器和构建生产版本。这为你深入学习 Vue.js 打下了坚实的基础。
接下来，你可以继续学习以下更高级的 Vue.js 概念和生态系统：
- Vue 模板语法: 深入学习
v-if,v-for,v-model等指令，以及事件修饰符、按键修饰符等。 - 组件通信: 除了 props (父传子)，还需要学习子传父事件 (
$emit)、非父子组件通信 (例如使用 mitt 库或 Pinia/Vuex)。 - 生命周期钩子: 了解组件在不同阶段 (创建、挂载、更新、销毁) 会触发的函数，可以在这些钩子中执行相应的逻辑。
- 计算属性 (Computed Properties) 和侦听器 (Watchers): 学习如何声明基于响应式数据计算而来的属性，以及如何侦听数据的变化并执行副作用。
- Vue Router: 学习如何构建单页面应用 (SPA)，处理页面导航和路由。
- 状态管理 (Pinia 或 Vuex): 对于大型应用，需要一个集中的状态管理库来管理复杂的共享数据。Pinia 是 Vue 3 推荐的状态管理库。
- Axios 或 Fetch API: 学习如何在 Vue 应用中发送 HTTP 请求，与后端 API 交互。
- 过渡与动画: 学习如何为元素或组件的进入、离开或列表变化添加过渡和动画效果。
- 组件库: 学习如何使用现有的 Vue UI 组件库，如 Element Plus, Vuetify, Ant Design Vue 等，加速开发过程。
- 测试: 学习如何为你的 Vue 组件和应用编写单元测试和端到端测试。
这些都是 Vue.js 生态系统中非常重要的组成部分，掌握它们将帮助你构建更复杂、更健壮的应用。
总结
本文作为 Vue.js 初学者指南的第一部分，详细介绍了从搭建环境到运行第一个应用的全过程。你学会了：
- 安装 Node.js 和 npm。
- 使用 Vite 官方推荐的方式创建 Vue 3 项目。
- 理解了现代 Vue 项目的基本文件结构，特别是单文件组件 (.vue)。
- 通过
npm run dev启动开发服务器，体验了快速的热模块替换。 - 通过修改
App.vue和了解HelloWorld.vue，初步认识了 Vue 的响应式数据、模板语法、事件绑定、属性绑定和组件化。 - 学会了使用
npm run build构建生产环境应用。
这只是 Vue.js 旅程的开始。Vue.js 还有许多强大的特性等待你去探索。保持好奇心，多动手实践，查阅官方文档（https://cn.vuejs.org/），加入社区交流，你将很快成为一名熟练的 Vue.js 开发者。
希望这篇详尽的指南对你有所帮助！祝你在学习 Vue.js 的道路上一切顺利！