Vue3——创建一个应用

其实使用脚手架创建的vue项目的main.js文件中已经为我们配置好 vue应用的创建。

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')

创建应用实例

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例。
createApp的参数应该是一个组件，应该是应用的跟组件，其他组将将作为其子组件。
该组件可以是从其他文件夹引入的.vue文件，也可以是直接编写的组件内容：

• 引入文件做参数

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

const app = createApp(App)

• 直接编写组件内容

import { createApp } from 'vue'

const app = createApp({
  template:'<div>组件的模板内容</div>', 
  data() {
    return {
      count: 0
    }
  }
})

挂载应用

创建好的应用实例必须在调用了 .mount() 方法后才会渲染出来。.mount()方法接受一个“容器”参数，可以是一个实际的DOM元素，也可以是一个CSS选择器字符串。

index.html（容器位置）:

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

挂载：

app.mount('#app')

应用实例的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意，不同于其他资源注册方法，它的返回值是根组件实例而非应用实例。

没有模板的组件的挂载

根组件的模板通常是组件本身的一部分：

• 在组件的配置项中编写template配置项
• 或者在组建文件的<template></template>中直接编写模板。

但是组件也可能并没有模板，此时如果该组件作为根组件进行挂在的时候，Vue 将自动使用容器的 innerHTML 作为模板

eg：
index.html

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

main.js

import { createApp } from 'vue'

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

app.mount('#app')

页面展示一个0

应用配置

应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项:

• 配置错误处理器，捕获所有子组件上的错误

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

• 注册组件
  应用实例提供了一些方法来注册应用范围内可用的资源，例如注册一个组件：

app.component('TodoDeleteButton', TodoDeleteButton)

多个应用实例

用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
main.js

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

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