vue3 注册全局组件

单个注册

1. 在main.js中注册

import { createApp } from 'vue'
import App from './App.vue'
import GTable from '@/components/g-table/index.vue'

const app = createApp(App)

app.component('GTable',GTable)
app.mount('#app')

2. 在components文件夹下新建index.js

// index.js
import GTable from './g-table/index.vue'
 
 export default function install(app) {
   app.component('GTable',GTable)
 }
 
 
 //main.js
 import { createApp } from 'vue'
 import App from './App.vue'
 import components from '@/components/index'
 createApp(App).use(components).mount('#app')

批量注册

在components文件夹下新建index.js

/*
 **全局注册组件
 */
 import { defineAsyncComponent } from 'vue'
 const components = import.meta.glob('./**/*.vue') // 异步方式
 
 export default function install(app) {
   for (const [key, value] of Object.entries(components)) {
     const name = key.split('/')[1]
     app.component(name, defineAsyncComponent(value))
   }
 }
 
 
  //main.js
 import { createApp } from 'vue'
 import App from './App.vue'
 import components from '@/components/index'
 createApp(App).use(components).mount('#app')

注意： 全局组件命名，不能使用下划线，可能导致注册失败。使用驼峰命名或者中划线