vue3统一引入组件并在tree中使用

在 Vue 3 中，可以使用 `app.component` 方法来注册全局组件，以便在任何 Vue 实例中使用它们。

为了统一引入组件并在组件树中使用，可以在一个单独的文件中注册所有组件，然后在需要使用这些组件的文件中引入该文件并将组件注册到组件树中。

例如，在一个名为 `globalComponents.js` 的文件中，可以按以下方式注册全局组件：

import { defineComponent } from 'vue'
import Component1 from './Component1.vue'
import Component2 from './Component2.vue'

export default {
  install(app) {
    app.component('component1', Component1)
    app.component('component2', Component2)
  }
}

然后，在需要使用这些组件的文件中，可以引入 `globalComponents.js` 文件，并将组件注册到组件树中：

import { createApp } from 'vue'
import GlobalComponents from './globalComponents.js'
import App from './App.vue'

const app = createApp(App)
app.use(GlobalComponents)
app.mount('#app')

现在，所有注册的组件都可以在组件树中使用了。可以像这样在 Vue 模板中使用它们：

<template>
  <div>
    <component1 />
    <component2 />
  </div>
</template>