// 全局組件注冊(cè) 需要到coms這個(gè)目錄下注冊(cè)
 
export default {
    install(app) {
        const req = require.context('./coms', true, /\.vue$/);
        req.keys().forEach((item) => {
            const defaultObj = req(item).default;
 
            let name = item.split('/')[1];
            // console.log('name', name);
            app.component(name, defaultObj);
        });
    }
};

import coms from '@/components/Index'; //全局組件注冊(cè)
app.use(coms);

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)就是注冊(cè)全局組件 （‘自定義鍵名'，組件名）

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

import type { Component } from 'vue' //import type 是用來(lái)協(xié)助進(jìn)行類型檢查和聲明的，在運(yùn)行時(shí)是完全不存在的。

import SvgIcon from './SvgIcon/index.vue'

// ?如果使用的是 JS 可以刪除類型校驗(yàn)

const components: {

  [propName: string]: Component //字面量類型，每個(gè)屬性值類型為組件的類型

} = {

  SvgIcon

}

export default components

import { createApp } from 'vue'

import ElementPlus from 'element-plus'

import 'element-plus/dist/index.css' // 基于斷點(diǎn)的隱藏類 Element 額外提供了一系列類名，用于在某些條件下隱藏元素

import App from './App.vue'

import router from './router'

import { store, key } from './store'

import globalComponent from '@/components/index' //引入需要注冊(cè)的全部組件

const app = createApp(App)

app.use(store, key).use(router).use(ElementPlus)

// 注冊(cè)全局的組件 （對(duì)所有需要注冊(cè)的組件進(jìn)行遍歷并注冊(cè)）

for (const componentItme in globalComponent) {

  app.component(componentItme, globalComponent[componentItme])

}

app.mount('#app') //需要注冊(cè)完組件后才掛載

import SvgIcon from '@/components/SvgIcon/index.vue'

//要擴(kuò)充@vue/runtime-core包的聲明

declare module '@vue/runtime-core' {

  export interface GlobalComponents { //這里擴(kuò)充"ComponentCustomProperties"接口

    SvgIcon: typeof SvgIcon

  }

}