Vue3注册全局组件的使用方法

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset/index.less'
import Card from './components/Card/index.vue'
createApp(App).component('Card',Card).mount('#app') 
//.component('Card',Card)就是注册全局组件 （‘自定义键名'，组件名）

<template>
 <Card></Card>
</template>

import type { Component } from 'vue' //import type 是用来协助进行类型检查和声明的，在运行时是完全不存在的。
import SvgIcon from './SvgIcon/index.vue'
// ✨如果使用的是 JS 可以删除类型校验
const components: {
  [propName: string]: Component //字面量类型，每个属性值类型为组件的类型
} = {
  SvgIcon
}
export default components

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css' // 基于断点的隐藏类 Element 额外提供了一系列类名，用于在某些条件下隐藏元素
import App from './App.vue'
import router from './router'
import { store, key } from './store'
import globalComponent from '@/components/index' //引入需要注册的全部组件
const app = createApp(App)
app.use(store, key).use(router).use(ElementPlus)
// 注册全局的组件 （对所有需要注册的组件进行遍历并注册）
for (const componentItme in globalComponent) {
  app.component(componentItme, globalComponent[componentItme])
}
app.mount('#app') //需要注册完组件后才挂载

import SvgIcon from '@/components/SvgIcon/index.vue'
//要扩充@vue/runtime-core包的声明
declare module '@vue/runtime-core' {
  export interface GlobalComponents { //这里扩充"ComponentCustomProperties"接口
    SvgIcon: typeof SvgIcon
  }
}