应用程序实例
每个 Vue 应用程序都首先使用 createApp 函数创建一个新的应用程序实例：
import { createApp } from 'vue'
const app = createApp({
/* root component options */
})
根组件
我们传入 createApp 的对象实际上是一个组件。每个应用程序都需要一个**“根组件”**，它可以包含其他组件作为其子组件。
如果您使用的是单文件组件 (SFC)，我们通常会从另一个文件导入根组件：
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 元素或选择器字符串：
<div id="app"></div>
app.mount('#app')
应用根组件的内容将呈现在容器元素内。容器元素本身不被视为应用程序的一部分。
在完成所有应用程序配置和资产注册后，应始终调用 .mount() 方法。另请注意，与资产注册方法不同，它的返回值是根组件实例而不是应用程序实例。
In-DOM 根组件模板
在没有构建步骤的情况下使用 Vue 时，我们可以直接在挂载容器中编写根组件的模板：
<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) => {
/* 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 应用程序实例。相反，创建多个小型应用程序实例并将它们挂载在它们负责的元素上。
