组件

src/components/LangSelect/index.vue

@@ -1,6 +1,5 @@
 <script setup>
 // 组件
-import SvgIcon from '@/components/SvgIcon/index.vue'
 import { useI18n } from 'vue-i18n'
 import { useAppStore } from '@/store/modules/app'
 
@@ -21,7 +20,7 @@ function handleLanguageChange(lang) {
 <template>
   <el-dropdown trigger="click" @command="handleLanguageChange">
     <div>
-      <component icon-class="language" :is="SvgIcon"></component>
+      <SvgIcon icon-class="language"></SvgIcon>
     </div>
     <template #dropdown>
       <el-dropdown-menu>

src/components/index.js

@@ -0,0 +1,7 @@
+export default function globalComponents(app) {
+  const components = import.meta.glob('./**/**.{vue,tsx}', { eager: true }) //获取文件夹及其嵌套的多级子文件夹
+  for (let [key, value] of Object.entries(components)) {
+    const name = key.replace('./', '').split('/')[0]
+    app.component(value.default.name || name, value.default)
+  }
+}

src/layout/parts/Header.vue

@@ -3,10 +3,10 @@
     <el-row>
       <el-col :span="24" class="main">
         <div class="left">
-          <component :is="breadcrumb"></component>
+          <Breadcrumb></Breadcrumb>
         </div>
         <div class="right">
-          <component class="navbar-item" :is="langSelect"></component>
+          <LangSelect class="navbar-item"></LangSelect>
           <el-dropdown>
             <el-icon style="margin-right: 8px; margin-top: 1px">
               <setting />
@@ -28,9 +28,6 @@
 </template>
 
 <script setup>
-// 组件
-import breadcrumb from '@/components/Breadcrumb/index.vue'
-import langSelect from '@/components/LangSelect/index.vue'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)

src/main.js

@@ -10,8 +10,10 @@ import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 // 本地SVG图标
 import 'virtual:svg-icons-register'
 // 国际化
-
+// 组件
+import globalComponents from '@/components'
 const app = createApp(App)
+globalComponents(app)
 setupStore(app)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

src/router/index.js

@@ -78,5 +78,5 @@ const router = createRouter({
     }
   ]
 })
-// registerBeforeRouter(router)
+registerBeforeRouter(router)
 export default router