创建 Vue 应用

应用实例

每个 Vue 应用都通过使用 createApp 函数创建一个新的 应用实例 开始。

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

根组件

传递给 createApp 的对象实际上是一个组件。每个应用都需要一个“根组件”，它可以包含其他组件作为其子组件。

如果您正在使用单文件组件，我们通常从另一个文件导入根组件

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

虽然本指南中的许多示例只需要单个组件，但大多数实际应用都是组织成嵌套的、可重用的组件树。例如，Todo 应用程序的组件树可能看起来像这样

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

在指南的后续部分，我们将讨论如何定义和组合多个组件。在此之前，我们将关注单个组件内部发生的事情。

挂载应用

应用实例在调用其 .mount() 方法之前不会渲染任何内容。它期望一个“容器”参数，这可以是实际的 DOM 元素或选择器字符串。

html

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

app.mount('#app')

应用根组件的内容将渲染在容器元素内。容器元素本身不被视为应用的一部分。

.mount() 方法应在完成所有应用配置和资产注册后调用。请注意，与资产注册方法不同，它的返回值是根组件实例而不是应用实例。

DOM 根组件模板

根组件的模板通常作为组件本身的一部分，但也可能通过直接在挂载容器内编写来单独提供模板。

html

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

import { createApp } from 'vue'

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

app.mount('#app')

Vue 会自动使用容器的 innerHTML 作为模板，如果根组件本身没有配置 template 选项。

在-DOM 模板通常用于不经过构建步骤直接使用 Vue 的应用。它们也可以与服务器端框架结合使用，其中根模板可能由服务器动态生成。

应用配置

应用实例公开了一个 .config 对象，允许我们配置一些应用级别的选项，例如定义一个应用级别的错误处理器来捕获所有子组件的错误。

app.config.errorHandler = (err) => {
  /* handle error */
}

应用实例还提供了一些注册应用级资源的方法。例如，注册一个组件

app.component('TodoDeleteButton', TodoDeleteButton)

这使得 TodoDeleteButton 在我们的应用中的任何地方都可以使用。我们将在指南的后续部分讨论组件和其他类型资源的注册。您还可以在其 API 参考中查看应用实例的完整 API 列表。

确保在挂载应用之前应用所有应用配置！

多个应用实例

您不仅仅限于在同一页面上使用单个应用实例。 createApp API 允许多个 Vue 应用在同一页面上共存，每个应用都有自己的配置和全局资源作用域。

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

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

如果您使用 Vue 来增强服务器端渲染的 HTML，并且只需要 Vue 来控制页面的特定部分，请避免在整个页面上挂载单个 Vue 应用实例。相反，创建多个小的应用实例，并将它们挂载到它们负责的元素上。

在 GitHub 上编辑此页面

创建 Vue 应用 ​

应用实例 ​

根组件 ​

挂载应用 ​

DOM 根组件模板 ​

应用配置 ​