import type { Component } from 'vue'
import SvgIcon from './SvgIcon/index.vue'

// ?如果使用的是 JS 可以刪除類型校驗(yàn)
const components: {
  [propName: string]: Component
} = {
  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'

const app = createApp(App)

app.use(store, key).use(router).use(ElementPlus).mount('#app')

// 注冊(cè)全局的組件
for (const componentItme in globalComponent) {
  app.component(componentItme, globalComponent[componentItme])
}

import SvgIcon from '@/components/SvgIcon/index.vue'
declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    SvgIcon: typeof SvgIcon
  }
}

//loading/index.vue
<script lang="ts">
import { NSpace, NSpin } from 'naive-ui'
import { defineComponent } from 'vue'
export default defineComponent({
? name: 'HsNavLoading',
? components: {
? ? NSpace,
? ? NSpin
? }
})

//loading/index.ts
import { App } from 'vue'
import loading from './index.vue'

export default {
? install(app: App) {
? ? app.component(loading.name, loading)
? }
}

//components/index.ts
import { App } from 'vue'
import loading from '@/components/Loading/index'

const components = [loading]
export default {
? install(app: App) {
? ? components.map((item) => {
? ? ? app.use(item)
? ? })
? }
}

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import components from '@/components/index'
const app = createApp(App)
app.use(router).mount('#app')
app.use(components)

<hsNavLoading :show="isLoading" />

<script lang="ts" setup>
import { NSpace, NSpin } from 'naive-ui'
defineExpose({
? ?name: 'HsNavLoading'
})

</script>