feat: 全局组件、全局指令自动注册

.gitignore

@@ -26,3 +26,5 @@ package-lock.json
 types/auto-imports.d.ts
 types/meIconComments.d.ts
 src/store/module.ts
+types/globalComponents.d.ts
+types/globalDirectives.d.ts

src/App.vue

@@ -6,7 +6,6 @@
   </el-config-provider>
 </template>
 <script setup lang="ts">
-import meComponent from './components/meComponent.vue';
 import { useSettingStore } from '@/store';
 import { sizeEnum } from '@/enums/configEnum';
 const settingStore = useSettingStore();

src/app.ts

@@ -2,13 +2,9 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import { event, mitter } from './event';
 import sidebarItem from '@/layout/components/sidebar/components/sidebarItem.vue';
-import meKeepAlive from '@/components/meKeepAlive';
-import clickOutside from "@/directive/clickOutside";
 export const app = createApp(App);
 export async function bootscrapt() {
     app.component('sidebarItem', sidebarItem);
-    app.component('meKeepAlive', meKeepAlive);
-    app.directive('ClickOutside', clickOutside)
     await Promise.allSettled(mitter.emit(event.ready, app));
     app.mount('#app');
 }

src/components/index.ts

@@ -0,0 +1,14 @@
+import path from "path-browserify";
+import { App, ComponentOptions } from "vue";
+import { fileToHump } from '@/utils/helper';
+
+//注册全局组件
+export function installComponent(app: App) {
+    const componentModules = import.meta.glob(['./core/*.{vue,ts}', './core/*/index.{vue,ts}'], {
+        import: 'default',
+        eager: true
+    }) as Record<string, ComponentOptions>;
+    for (const key in componentModules) {
+        app.component(fileToHump(path.relative('/core', '/' + key)), componentModules[key]);
+    }
+}

src/directives/index.ts

@@ -0,0 +1,13 @@
+import { fileToHump } from "@/utils/helper";
+import path from "path-browserify";
+import { App, Directive } from "vue";
+//注册全局指令
+export function installDirective(app: App) {
+    const directiveModules = import.meta.glob(['./core/*.ts', './core/*/index.ts'], {
+        import: 'default',
+        eager: true
+    }) as Record<string, Directive>;
+    for (const key in directiveModules) {
+        app.directive(fileToHump(path.relative('/core', '/' + key)), directiveModules[key]);
+    }
+}

src/event/modules/core.ts

@@ -6,6 +6,8 @@ import 'element-plus/dist/index.css';
 import 'element-plus/theme-chalk/dark/css-vars.css'
 import { installIcon } from '@/icons';
 import { installI18n } from '@/locales/i18n';
+import { installComponent } from '@/components';
+import { installDirective } from '@/directives';
 import nProgress from 'nprogress';
 import 'nprogress/nprogress.css';
 
@@ -14,6 +16,8 @@ mitter.once(event.ready, async (app) => {
     installIcon(app);
     await installStore(app);
     await installI18n(app);
+    installComponent(app);
+    installDirective(app);
     installRoute(app);
     window.addEventListener('resize', () => mitter.emit(event.resize));
     //进度条配置

src/icons/index.ts

@@ -1,5 +1,4 @@
 /// <reference types="vite-svg-loader" />
-
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import path from 'path-browserify';
 import { App, Component, h } from 'vue'

src/layout/index.vue

@@ -27,9 +27,7 @@
 <script setup lang="ts" name="layout">
 import layoutSidebar from './components/sidebar/index.vue';
 import layoutNavbar from './components/navbar/index.vue';
-import meComponent from '@/components/meComponent.vue';
 import { useRouteStore, useSettingStore, useGlobalStore } from '@/store';
-import { MeKeepAliveProps } from '@/components/meKeepAlive';
 const settingStore = useSettingStore();
 const routeStore = useRouteStore();
 const globalStore = useGlobalStore();

src/utils/helper.ts

@@ -31,4 +31,25 @@ export function concatObjectValue<T, P extends Record<string, T[]> = Record<stri
         (currentValue, previousValue) => {
             return currentValue.concat(previousValue || []);
         }, [] as T[])
+}
+
+/**
+ * 文件名转驼峰
+ * @param fileName 
+ * @param nameTemplate 
+ * @returns 
+ */
+export const fileToHump = function (fileName: string): string {
+    const index = fileName.lastIndexOf('.');
+    if (index > 0) {
+        fileName = fileName.slice(0, index);
+    }
+    let fileNameArr = fileName.replace(/\\/g, '/').split('/');
+    if (fileNameArr[fileNameArr.length - 1] == 'index' || fileNameArr[fileNameArr.length - 1] == 'Index') {
+        fileNameArr.pop();
+    }
+    for (let i = 1, len = fileNameArr.length; i < len; i++) {
+        fileNameArr[i] = fileNameArr[i].slice(0, 1).toUpperCase() + fileNameArr[i].slice(1)
+    }
+    return fileNameArr.join('');
 }

template/globalComponents.d.ts

@@ -0,0 +1,7 @@
+//import code
+declare module "@vue/runtime-core" {
+    interface GlobalComponents {
+        //code
+    }
+}
+export { };

template/globalDirectives.d.ts

@@ -0,0 +1,7 @@
+//import code
+declare module "@vue/runtime-core" {
+    interface ComponentCustomProperties {
+        //code
+    }
+}
+export { };

vite.config.ts

@@ -55,14 +55,35 @@ export default ({ command, mode }: ConfigEnv): UserConfigExport => {
           return 'MeIcon' + name[0].toUpperCase() + name.slice(1);
         },
         template: fs.readFileSync('./template/meIconComments.d.ts', 'utf-8'),
-        codeTemplates: [{ key: '\n        //code', template: '\n        {{name}}: Icon;' }]
+        codeTemplates: [{ key: '        //code', template: '        {{name}}: Icon;/n' }]
       },
       {//pinia module
         pattern: ['**/*.{ts,js}', '*.{ts,js}'],
         dir: 'src/store/modules',
         toFile: 'src/store/module.ts',
         name: 'use_{{name}}_store'
-      }
+      },
+      {//global component
+        pattern: ['*.{vue,ts}', '*/index.{vue,ts}'],
+        dir: 'src/components/core',
+        toFile: 'types/globalComponents.d.ts',
+        template: fs.readFileSync('./template/globalComponents.d.ts', 'utf-8'),
+        codeTemplates: [
+          { key: '//import code', template: 'import {{name}} from "{{path}}"\n' },
+          { key: '        //code', template: '        {{name}}: typeof {{name}};\n' }
+        ]
+      },
+      {//global directives
+        pattern: ['*.{vue,ts}', '*/index.{vue,ts}'],
+        dir: 'src/directives/core',
+        toFile: 'types/globalDirectives.d.ts',
+        template: fs.readFileSync('./template/globalDirectives.d.ts', 'utf-8'),
+        codeTemplates: [
+          { key: '//import code', template: 'import {{name}} from "{{path}}"\n' },
+          { key: '        //code', template: '        {{name}}: typeof {{name}};\n' }
+        ],
+        name: 'v_{{name}}'
+      },
     ]),
     vueSetUpExtend({ setLangImport: true, exclude: ['steup', 'lang'], setComponents: true })
     ],