2. 创建第一个 Vue 应用

应用实例

每个 Vue 应用都从创建一个应用实例开始：

import { createApp } from 'vue'

const app = createApp({
  /* 根组件选项 */
})

createApp 接收一个”根组件”作为参数。这个组件是所有其他组件的老大，整个组件树都挂在它下面。

根组件

用单文件组件时，通常从外部文件导入根组件：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

大多数真实应用会组织成一棵组件树，例如：

App (根组件)
├─ TodoList
│  └─ TodoItem
└─ TodoFooter

组件树的详细结构和设计方法将在第 11 章”组件基础”中深入讲解。

挂载应用

创建完应用实例后，必须调用 .mount() 才会渲染任何东西：

<div id="app"></div>

app.mount('#app')

.mount() 接收一个 DOM 元素或选择器字符串。根组件的内容会被渲染到这个容器里，容器本身不属于应用。

内联模板

根组件的模板也可以直接写在挂载容器里：

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return { count: 0 }
  }
})

app.mount('#app')

如果根组件没有 template 选项，Vue 会自动用容器的 innerHTML 作为模板。这种方式常用于没有构建步骤的场景。

应用配置

应用实例暴露了 .config 对象，可以配置一些应用级选项：

// 全局错误处理
app.config.errorHandler = (err) => {
  console.error('出错了：', err)
}

还可以注册全局组件，让整个应用都能用：

app.component('TodoDeleteButton', TodoDeleteButton)

多应用实例

同一个页面可以有多个 Vue 应用，各自独立：

const app1 = createApp({ /* ... */ })
app1.mount('#container-1')

const app2 = createApp({ /* ... */ })
app2.mount('#container-2')

如果只需要在页面局部用 Vue 控制某些区域，不要挂一个应用到整个页面。创建多个小实例，各自负责自己的区域。

项目结构

脚手架生成的项目大致长这样：

my-project/
├── index.html          # 入口 HTML
├── package.json        # 依赖配置
├── public/             # 静态资源
├── src/
│   ├── App.vue         # 根组件
│   ├── main.js         # 应用入口
│   ├── components/     # 组件目录
│   └── assets/         # 图片、样式等
└── vite.config.js      # Vite 配置

main.js 是入口文件，负责创建应用并挂载：

import { createApp } from 'vue'
import App from './App.vue'

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

本节回顾

• createApp() 创建应用实例，接收根组件
• mount('#app') 挂载应用，必须在配置完成后调用
• 应用实例可以配置全局错误处理、注册全局组件
• 同一页面可以有多个独立应用
• 脚手架项目以 main.js 为入口，App.vue 为根组件