vue3如何定义全局组件

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

// createApp 函数创建一个应用实例
const app = createApp(App)
// 定义全局组件
app.component('alert-box', {
  template: `
  <div class="demo-alert-box">
  <strong>Error!</strong>
  <slot></slot>
  </div>
  `
})

app.component('blog-post', {
  props: ['postTitle'],
  template: `
  <h3>{{ postTitle }}</h3>
  `
})
// mount 函数返回根组件实例
const vm = app.mount('#app')

console.warn('app', app, vm);

// HelloWorld.vue
<template>
  <h1>{{ msg }}</h1>

  <p>
    <a href="https://vitejs.dev/guide/features.html" rel="external nofollow"  target="_blank">
      Vite Documentation
    </a>
    |
    <a href="https://v3.vuejs.org/" rel="external nofollow"  target="_blank">Vue 3 Documentation</a>
  </p>

  <button @click="state.count++">count is: {{ state.count }}</button>
  <p>
    Edit
    <code>components/HelloWorld.vue</code> to test hot module replacement.
  </p>
  <table>
    <tr v-is="'blog-post'" post-title="表格行的标题"></tr>
  </table>
  <alert-box>
    Something bad happened.
  </alert-box>
  <blog-post post-title="hello!"></blog-post>
</template>

<script setup>
import { defineProps, reactive } from 'vue'

defineProps({
  msg: String
})

const state = reactive({ count: 0 })
</script>

<style scoped>
a {
  color: #42b983;
}
</style>

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      'vue':  'vue/dist/vue.esm-bundler.js' 
    },
  },
})