创建一个 Vue 应用

应用实例

• 通过 createApp 函数创建一个新的 应用实例：

import { createApp } from 'vue'

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

根组件

• createApp 的对象实际上是一个组件，每个应用都需要一个“根组件”，其他组件将作为其子组件。
• 使用的是单文件组件，可以直接从另一个文件中导入根组件。 代码如下：

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'

const app = createApp(App)

挂载应用

• 使用的组件需要调用.mount()方法后才能渲染显示

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

app.mount('#app')

DOM 中的根组件模板

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

import { createApp } from 'vue'
const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

应用配置

• .config 对象可以配置一些选项，用来捕获所有子组件上的错误：

app.config.errorHandler = (err) => {
  /* 处理错误 */
}

多个应用实例

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

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