2.4 第一个 Vue 组件的编写与挂载

理解 Vue 最快的方式，就是亲手写一个能跑的组件，把它挂到页面上去。这一节我们走一遍最简单的流程：创建一个组件 → 把组件挂到 HTML 页面上 → 验证效果。你可以选择“零工具”的 CDN 方式，也可以用 Vite 搭建一个本地工程。两者本质一样，只是运行环境不同。

方式一：CDN 零工具起步（推荐新手先用这个）

在一个空白的 HTML 文件里，通过 <script> 标签引入 Vue 3，就可以直接写组件。这是最快看到效果的途径，完全不需要安装 Node.js 或配置构建工具。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>我的第一个 Vue 组件</title>
</head>
<body>
  <!-- 这里是 Vue 要接管的挂载点 -->
  <div id="app"></div>

  <!-- 1. 引入 Vue 3 全局构建版本 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  <script>
    // 2. 定义一个组件：包含模板、数据、方法
    const HelloWorld = {
      template: `
        <div>
          <h2>{{ greeting }}</h2>
          <p>当前点击次数：{{ count }}</p>
          <button @click="increment">点我加1</button>
        </div>
      `,
      data() {
        return {
          greeting: '你好，Vue 3！',
          count: 0
        }
      },
      methods: {
        increment() {
          this.count++
        }
      }
    }

    // 3. 创建 Vue 应用，传入组件配置，然后挂载到 #app
    const app = Vue.createApp(HelloWorld)
    app.mount('#app')
  </script>
</body>
</html>

直接用浏览器打开这个 HTML 文件，你会看到一个标题、一个计数器和一个按钮。每次点击按钮，计数器自动加 1，完全没有手动写 document.getElementById 或 innerText。

这段代码拆解一下：

data() 函数返回一个对象，里面的 greeting 和 count 自动变成响应式数据，模板中用 {{ }} 插值展示它们。
methods 里的 increment 修改了 this.count，Vue 的响应式系统检测到变化，自动重新渲染界面上依赖它的部分。
Vue.createApp(HelloWorld) 创建了一个 Vue 应用实例，传入我们定义的组件作为根组件。
app.mount('#app') 把整个 Vue 应用挂载到页面上真实存在的 id="app" 的 DOM 元素上，Vue 生成的 DOM 会替换掉 #app 内部的内容。

注意：这种方式适合原型验证、简单页面试水，不适合真实项目长期开发（因为它不支持 .vue 单文件组件的语法高亮和热更新）。等你想正经做一个工程化项目时，再用下面这种方式。

方式二：Vite 脚手架创建项目（实际工程推荐）

Vite 是目前最快捷的 Vue 3 开发环境搭建工具。步骤极简：

# 1. 创建项目，选择 Vue 模板
npm create vue@latest my-first-vue

# 2. 进入项目，安装依赖
cd my-first-vue
npm install

# 3. 启动开发服务器
npm run dev

命令执行完毕后，Vite 会给你一个本地地址（通常是 http://localhost:5173），打开就能看到官方预置的欢迎页面。

你看到的核心文件是 src/App.vue，这就是一个 Vue 组件。它的文件结构如下（保持简洁，去掉没必要的原示例代码）：

<!-- src/App.vue -->
<template>
  <div id="app">
    <h1>{{ title }}</h1>
    <button @click="handleClick">点击一下</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const title = ref('我的第一个 Vite 项目')

function handleClick() {
  title.value = '你点击了按钮！'
}
</script>

而在 src/main.js 里，Vue 做了和 CDN 方式完全一样的事情：创建应用并挂载。

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

打开浏览器，修改 App.vue 的内容保存，你会发现页面无需刷新、实时更新，这就是 Vite 的热模块替换（HMR）能力。这个体验会让你的开发反馈循环变得极短。

组件编写与挂载的本质

无论用哪种方式，一个 Vue 组件的定义和挂载都可分为三步：

声明模板：描述 HTML 结构和动态绑定（插值、指令、事件等）。
定义逻辑：提供响应式数据、计算属性、方法，告诉组件“数据怎么来、怎么变”。
挂载到宿主：通过 createApp(组件).mount('#容器id') 把组件渲染到真实的 DOM 节点上。

理解了这个“声明-挂载”流程，你就拿到了 Vue 开发最核心的钥匙。剩下的路由、状态管理、组合式 API，都围绕这个基础流程在扩展。