Vue.js 快速上手教程 – wiki基地

作者： /

Vue.js 快速上手：从入门到构建交互式 Web 应用

Vue.js (通常简称为 Vue) 是一个用于构建用户界面的渐进式 JavaScript 框架。与庞大的单体框架不同，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用 (SPA – Single-Page Application) 提供驱动。

如果你是前端开发的新手，或者希望寻找一个现代、高效且易于学习的框架，那么 Vue.js 是一个绝佳的选择。本教程将带你一步步深入 Vue 的世界，从基础概念到构建一个简单的交互式应用。

本文目标读者：

  • 具备基本的 HTML, CSS, 和 JavaScript (ES6+) 知识。
  • 了解 Node.js 和 npm/yarn 的基本使用。
  • 希望快速掌握 Vue.js 核心概念并开始构建应用的开发者。

文章结构：

  1. Vue.js 简介与核心特性
  2. 环境准备与项目创建
  3. Vue 项目结构解析
  4. Vue 核心概念详解
    • Vue 应用实例与根组件
    • 模板语法 (Template Syntax)
    • 响应式基础 (Reactivity Fundamentals)
    • 计算属性 (Computed Properties)
    • 侦听器 (Watchers)
    • Class 与 Style 绑定
    • 条件渲染 (Conditional Rendering)
    • 列表渲染 (List Rendering)
    • 事件处理 (Event Handling)
    • 表单输入绑定 (Form Input Bindings)
    • 生命周期钩子 (Lifecycle Hooks)
  5. 组件系统
    • 什么是组件？
    • 创建与注册组件
    • Props (父子组件通信)
    • Emitting 事件 (子父组件通信)
    • 插槽 (Slots)
  6. 路由管理 (Vue Router)
  7. 状态管理 (Pinia)
  8. 构建与部署
  9. 总结与后续学习

1. Vue.js 简介与核心特性

在深入代码之前，让我们先理解为什么 Vue 如此受欢迎：

  • 易学易用 (Approachable): Vue 的 API 设计简洁直观，学习曲线相对平缓。官方文档清晰详尽，社区活跃，入门门槛较低。
  • 渐进式框架 (Progressive): 你可以将 Vue 作为现有项目中的一个库来使用，只利用其核心的视图渲染功能；也可以配合其生态系统中的路由 (Vue Router)、状态管理 (Pinia/Vuex) 等工具，构建功能完善的大型单页应用。这种灵活性使得 Vue 适用于各种规模的项目。
  • 高性能 (Performant): Vue 拥有优化的虚拟 DOM (Virtual DOM) 实现和编译时优化。它会尽可能地减少实际 DOM 操作，提供流畅的用户体验。
  • 组件化开发 (Component-Based): Vue 鼓励将用户界面拆分成一个个可复用、独立的组件。这使得代码更易于维护、测试和扩展。
  • 丰富的生态系统 (Rich Ecosystem): Vue 拥有一个庞大且活跃的社区，提供了大量的官方和第三方库、工具，如 Vue Router (路由)、Pinia (状态管理)、Vue Devtools (浏览器调试插件)、Vite (构建工具) 等，能够满足开发中的各种需求。

2. 环境准备与项目创建

开始 Vue 开发前，你需要确保你的开发环境已安装以下工具：

  1. Node.js: Vue CLI (命令行工具) 和现代前端开发流程依赖 Node.js。请访问 Node.js 官网 下载并安装 LTS (长期支持) 版本。安装 Node.js 会同时安装 npm (Node Package Manager)。你可以通过在终端运行 node -v 和 npm -v 来检查是否安装成功。
  2. 代码编辑器: 推荐使用 Visual Studio Code (VS Code)，并安装 Volar (或 Vetur，但 Volar 是 Vue 3 的官方推荐) 扩展，它能提供强大的 Vue 语法高亮、智能提示和错误检查功能。

使用 Vue CLI 创建项目:

Vue CLI 是 Vue.js 官方提供的标准工具，用于快速搭建项目脚手架。现在推荐使用 create-vue (基于 Vite) 来创建新项目，它更快、更现代。

打开你的终端或命令行工具，运行以下命令：

“`bash

使用 npm

npm create vue@latest

或者使用 yarn

yarn create vue

“`

这个命令会启动一个交互式的项目设置引导程序。它会询问你一系列问题来配置你的项目，例如：

  • Project name: 项目名称 (例如：my-vue-app)
  • Add TypeScript? 是否添加 TypeScript 支持 (初学者可以选择 No)
  • Add JSX Support? 是否添加 JSX 支持 (通常选择 No)
  • Add Vue Router for Single Page Application development? 是否添加 Vue Router (用于页面导航，建议选择 Yes)
  • Add Pinia for state management? 是否添加 Pinia (用于状态管理，对于稍复杂的应用建议 Yes)
  • Add Vitest for Unit Testing? 是否添加单元测试 (初学可选 No)
  • Add Cypress for End-to-End testing? 是否添加端到端测试 (初学可选 No)
  • Add ESLint for code quality? 是否添加 ESLint (用于代码规范检查，强烈建议 Yes)
  • Add Prettier for code formatting? 是否添加 Prettier (用于代码格式化，强烈建议 Yes)

根据你的需求进行选择。对于快速上手，可以先选择添加 Vue Router 和 Pinia (如果需要的话)，以及 ESLint 和 Prettier。

设置完成后，根据提示进入项目目录并安装依赖：

bash
cd my-vue-app # 进入你设置的项目名称目录
npm install # 或者 yarn install

安装完依赖后，启动开发服务器：

bash
npm run dev # 或者 yarn dev

终端会显示一个本地开发服务器地址 (通常是 http://localhost:5173/)。在浏览器中打开这个地址，你就能看到 Vue 默认的欢迎页面了！这表示你的 Vue 项目已成功创建并运行。

3. Vue 项目结构解析

打开你创建的 my-vue-app 文件夹，你会看到以下主要的目录和文件结构 (基于选择了 Router 和 Pinia 的情况)：

my-vue-app/
├── node_modules/ # 项目依赖包
├── public/ # 静态资源目录 (不会被 Webpack/Vite 处理)
│ └── favicon.ico # 网站图标
├── src/ # 项目核心源代码目录
│ ├── assets/ # 静态资源 (会被 Webpack/Vite 处理)
│ │ └── base.css # 基础样式
│ │ └── main.css # 主要样式
│ ├── components/ # 可复用组件目录
│ │ └── HelloWorld.vue
│ │ └── TheWelcome.vue
│ │ └── WelcomeItem.vue
│ │ └── icons/
│ ├── router/ # 路由配置目录
│ │ └── index.js # 路由定义文件
│ ├── stores/ # Pinia 状态管理目录
│ │ └── counter.js # 示例 store
│ ├── views/ # 页面级视图组件目录
│ │ └── HomeView.vue
│ │ └── AboutView.vue
│ ├── App.vue # 根组件
│ └── main.js # 应用入口文件
├── .eslintrc.cjs # ESLint 配置文件
├── .gitignore # Git 忽略配置
├── .prettierrc.json # Prettier 配置文件
├── index.html # 应用主 HTML 文件 (Vite 项目模板入口)
├── package.json # 项目信息与依赖配置文件
├── README.md # 项目说明文件
└── vite.config.js # Vite 配置文件

关键文件/目录说明：

  • index.html: 单页应用的 HTML 入口。Vue 应用最终会被挂载到这个文件中的某个 DOM 元素上 (通常是 <div id="app"></div>)。Vite 在开发和构建时会处理这个文件。
  • src/main.js: 应用的入口 JavaScript 文件。它负责创建 Vue 应用实例，配置插件 (如 Router, Pinia)，并将应用挂载到 index.html 中的 DOM 元素上。
  • src/App.vue: 应用的根组件。所有其他的页面和组件都将嵌套在 App.vue 内部。通常包含全局布局，如导航栏、页脚，以及 <router-view> 用于显示当前路由对应的组件。
  • src/components/: 存放可复用的 UI 组件，例如按钮、卡片、图标等。这些组件可以在应用的不同地方被导入和使用。
  • src/views/: 存放页面级别的组件，通常与路由对应。例如 HomeView.vue 对应首页，AboutView.vue 对应关于页面。
  • src/router/index.js: 配置应用路由规则的地方。定义 URL 路径与视图组件的映射关系。
  • src/stores/: 使用 Pinia 进行状态管理的 Store 文件存放目录。
  • src/assets/: 存放需要通过构建工具处理的静态资源，如 CSS 文件、图片等。
  • public/: 存放不会被构建工具处理的纯静态资源。这些文件会直接被复制到最终构建输出的根目录下。适合放 favicon.ico 或一些不需要打包的第三方库。
  • package.json: Node.js 项目的清单文件，记录了项目名称、版本、依赖库、脚本命令 (如 dev, build) 等信息。
  • vite.config.js: Vite 构建工具的配置文件。

4. Vue 核心概念详解

现在让我们深入了解 Vue 的核心概念。我们将主要使用 Vue 3 的 Composition API 配合 <script setup> 语法，这是目前推荐的写法，更加简洁和强大。

4.1 Vue 应用实例与根组件

在 src/main.js 文件中，你会看到创建 Vue 应用实例的代码：

“`javascript
import ‘./assets/main.css’ // 导入全局样式

import { createApp } from ‘vue’
import { createPinia } from ‘pinia’ // 导入 Pinia

import App from ‘./App.vue’ // 导入根组件
import router from ‘./router’ // 导入路由配置

const app = createApp(App) // 创建 Vue 应用实例，传入根组件 App

app.use(createPinia()) // 注册 Pinia 插件
app.use(router) // 注册 Router 插件

app.mount(‘#app’) // 将应用挂载到 index.html 中 id=”app” 的元素上
“`

  • createApp(App): 创建一个 Vue 应用实例，App 是我们定义的根组件。
  • app.use(...): 用于安装 Vue 插件，如 Pinia 和 Vue Router。
  • app.mount('#app'): 将这个 Vue 应用挂载到 HTML 页面中 id 为 app 的 DOM 元素上。这个元素通常在 index.html 文件中定义。

4.2 模板语法 (Template Syntax)

Vue 使用一种基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有的 Vue 模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

打开 src/App.vue 或创建一个新的组件文件 (例如 src/components/MyComponent.vue)。一个典型的 Vue 单文件组件 (SFC – Single File Component) 包含三个部分：

“`vue

“`

  • <template>: 定义组件的 HTML 结构。
  • <script setup>: 使用 Composition API 编写组件的 JavaScript 逻辑。这里定义的变量和函数会自动暴露给模板使用。
  • <style scoped>: 定义组件的 CSS 样式。scoped 属性确保样式只应用于当前组件内的元素，避免全局样式污染。

核心模板语法：

  • 文本插值 (Text Interpolation): 使用双大括号 {{ }} (Mustache 语法) 将数据绑定到 DOM 文本内容。例如 {{ message }}。
  • Attribute 绑定 (v-bind): 用于动态绑定 HTML 元素的 attribute。例如 v-bind:id="dynamicId"。可以简写为冒号 :，如 :id="dynamicId"。
  • JavaScript 表达式: 在 {{ }} 和 v-bind 中可以使用简单的 JavaScript 表达式。

4.3 响应式基础 (Reactivity Fundamentals)

Vue 的核心特性之一就是其响应式系统。当你修改 JavaScript 中的数据时，Vue 会自动侦测到这些变化，并高效地更新相关的 DOM。

在 Composition API (<script setup>) 中，我们使用 ref 和 reactive 来创建响应式数据：

  • ref: 用于创建包装基本类型值 (String, Number, Boolean) 或单个对象的响应式引用。在 <script setup> 中访问其值需要通过 .value 属性，但在模板中 Vue 会自动解包，可以直接使用。

    “`vue


    “`

  • reactive: 用于创建对象或数组的响应式代理。它会深度地使对象内部的所有属性都变成响应式的。访问 reactive 对象的属性时，不需要 .value。

    “`vue


    “`

选择 ref 还是 reactive？

  • 对于基本类型值，总是使用 ref。
  • 对于对象或数组，reactive 更自然，因为它不需要 .value。但 ref 也可以包装对象（ref({})），并且在解构或传递给函数时可能更方便，因为它保持了响应式连接。reactive 创建的代理如果被重新赋值给一个新对象，会失去响应性，而 ref 通过 .value 赋值则不会。
  • 社区推荐：倾向于在顶层为每个逻辑关注点使用 ref，即使是对象类型，这样在重构时更灵活。但 reactive 在处理复杂嵌套对象时代码更简洁。

4.4 计算属性 (Computed Properties)

有时我们需要基于响应式数据派生出新的状态。例如，根据一个数组计算其长度，或者格式化一个日期。直接在模板中使用复杂表达式会让模板变得臃肿且难以维护。计算属性就是为此而生的。

计算属性会缓存其结果。只有当其依赖的响应式数据发生变化时，它才会重新计算。否则，它会直接返回缓存的结果，性能更高。

“`vue


“`

计算属性默认是只读的，但也可以提供一个带有 get 和 set 的对象来创建可写的计算属性（虽然不常用）。

计算属性 vs 方法 (Methods):

你可以用一个方法 (在 <script setup> 中定义一个普通函数) 来达到同样的效果。但区别在于：

  • 计算属性是基于它们的响应式依赖进行缓存的。 只在相关响应式依赖发生改变时它们才会重新求值。
  • 方法每次在模板中被调用时，总是会执行函数。

如果一个计算不依赖任何响应式数据，或者你希望每次访问都重新执行计算，那么使用方法更合适。否则，计算属性是更好的选择。

4.5 侦听器 (Watchers)

虽然计算属性在大多数情况下更合适，但有时我们需要在数据变化时执行异步或开销较大的操作。这时就需要使用侦听器 (watch)。

watch 函数接收三个参数：

  1. 要侦听的源: 可以是 ref、reactive 对象、计算属性或返回值的 getter 函数。也可以是一个包含多个源的数组。
  2. 回调函数: 当源变化时执行。回调接收新值 (newValue) 和旧值 (oldValue) 作为参数。
  3. (可选) 配置对象: 例如 { immediate: true } (立即执行一次回调)、{ deep: true } (深度侦听对象内部变化)。

“`vue


“`

watchEffect:

还有一个 watchEffect 函数。它会立即执行一次回调函数，并自动追踪回调函数中使用的所有响应式依赖。当任何依赖变化时，回调会重新执行。它更适合那些不需要关心旧值，并且依赖关系简单的场景。

“`vue
import { ref, watchEffect } from ‘vue’

const userID = ref(1)
const userData = ref(null)

watchEffect(async () => {
// 这个回调会立即执行，并在 userID.value 变化时再次执行
console.log(Fetching data for user ${userID.value}...)
// const response = await fetch(https://api.example.com/users/${userID.value})
// userData.value = await response.json()
// 模拟
userData.value = { id: userID.value, name: User ${userID.value} }
})

// function changeUser() { userID.value++ }

“`

4.6 Class 与 Style 绑定

我们可以使用 v-bind (简写 :) 来动态地绑定 HTML 元素的 class 和 style。

绑定 Class:

  • 对象语法:

    “`vue

    “`

  • 数组语法:

    “`vue


    “`

绑定 Style:

  • 对象语法: (CSS 属性名可以使用驼峰式 fontSize 或短横线分隔 font-size)

    “`vue


    “`

  • 数组语法: (将多个样式对象应用到一个元素上)

    “`vue


    “`

4.7 条件渲染 (Conditional Rendering)

  • v-if, v-else-if, v-else:

    • 根据表达式的真假值来真正地渲染或销毁元素及其包含的组件。
    • v-if 是惰性的：如果初始条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染。
    • v-else 和 v-else-if 必须紧跟在 v-if 或 v-else-if 元素之后。

    “`vue


    ``
    *