perf: ⚡️ 自定义指令注册方法优化

src/api/modules/index.ts

@@ -0,0 +1,10 @@
+// 自动导入modules
+const files = import.meta.glob("./modules/*.ts");
+let modules = {};
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+Object.entries(files).forEach(([k, v]) => {
+ Object.assign(modules, v);
+});
+export default {
+ ...modules
+};

src/directives/index.ts

@@ -1,28 +1,9 @@
-import auth from "./modules/auth";
-import copy from "./modules/copy";
-import waterMarker from "./modules/waterMarker";
-import draggable from "./modules/draggable";
-import debounce from "./modules/debounce";
-import throttle from "./modules/throttle";
-import longpress from "./modules/longpress";
-import loading from "./modules/loading";
-const directivesList: { [key: string]: Directive } = {
- auth,
- copy,
- waterMarker,
- draggable,
- debounce,
- throttle,
- longpress,
- loading
-};
-
-const directives = {
- install: function (app: App<Element>) {
- Object.keys(directivesList).forEach(key => {
- app.directive(key, directivesList[key]);
- });
+export default {
+ install(app: App<Element>) {
+ const modules = import.meta.glob("./modules/*.ts");
+ for (const [key, value] of Object.entries(modules)) {
+ const directiveName = key.replace("./modules/", "").split(".")[0];
+ app.directive(directiveName, value.default);
+ }
  }
 };
-
-export default directives;

src/directives/modules/imgLazy.ts

@@ -17,13 +17,3 @@ export default {
  });
  }
 };
-// export default {
-// install(app) {
-// // 获取到所有指令模块对象
-// const modules = import.meta.globEager("./modules/*.js");
-// for (let [key, value] of Object.entries(modules)) {
-// const directiveName = key.replace("./modules/", "").split(".")[0];
-// app.directive(directiveName, value.default);
-// }
-// }
-// };

src/hooks/useApi.ts

@@ -0,0 +1,7 @@
+export default function useApi() {
+ const { appContext } = getCurrentInstance() as ComponentInternalInstance;
+ const proxy = appContext.config.globalProperties;
+ return {
+ proxy
+ };
+}

src/typings/auto-imports.d.ts

@@ -95,6 +95,6 @@ declare global {
 // for type re-export
 declare global {
  // @ts-ignore
- export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef, Directive, DirectiveBinding, App, CSSProperties, ElRef } from 'vue'
+ export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef, Directive, DirectiveBinding, App, CSSProperties, ElRef, ComponentInternalInstance } from 'vue'
  import('vue')
 }

src/typings/components.d.ts

@@ -9,37 +9,6 @@ declare module 'vue' {
  export interface GlobalComponents {
  ColSetting: typeof import('./../components/ProTable/components/ColSetting.vue')['default']
  ECharts: typeof import('./../components/ECharts/index.vue')['default']
- ElAside: (typeof import("element-plus/es"))["ElAside"]
- ElAutocomplete: (typeof import("element-plus/es"))["ElAutocomplete"]
- ElBadge: (typeof import("element-plus/es"))["ElBadge"]
- ElBreadcrumb: (typeof import("element-plus/es"))["ElBreadcrumb"]
- ElBreadcrumbItem: (typeof import("element-plus/es"))["ElBreadcrumbItem"]
- ElButton: (typeof import("element-plus/es"))["ElButton"]
- ElColorPicker: (typeof import("element-plus/es"))["ElColorPicker"]
- ElContainer: (typeof import("element-plus/es"))["ElContainer"]
- ElDialog: (typeof import("element-plus/es"))["ElDialog"]
- ElDivider: (typeof import("element-plus/es"))["ElDivider"]
- ElDrawer: (typeof import("element-plus/es"))["ElDrawer"]
- ElDropdown: (typeof import("element-plus/es"))["ElDropdown"]
- ElDropdownItem: (typeof import("element-plus/es"))["ElDropdownItem"]
- ElDropdownMenu: (typeof import("element-plus/es"))["ElDropdownMenu"]
- ElFooter: (typeof import("element-plus/es"))["ElFooter"]
- ElForm: (typeof import("element-plus/es"))["ElForm"]
- ElFormItem: (typeof import("element-plus/es"))["ElFormItem"]
- ElHeader: (typeof import("element-plus/es"))["ElHeader"]
- ElIcon: (typeof import("element-plus/es"))["ElIcon"]
- ElInput: (typeof import("element-plus/es"))["ElInput"]
- ElMain: (typeof import("element-plus/es"))["ElMain"]
- ElMenu: (typeof import("element-plus/es"))["ElMenu"]
- ElMenuItem: (typeof import("element-plus/es"))["ElMenuItem"]
- ElPopover: (typeof import("element-plus/es"))["ElPopover"]
- ElScrollbar: (typeof import("element-plus/es"))["ElScrollbar"]
- ElSubMenu: (typeof import("element-plus/es"))["ElSubMenu"]
- ElSwitch: (typeof import("element-plus/es"))["ElSwitch"]
- ElTabPane: (typeof import("element-plus/es"))["ElTabPane"]
- ElTabs: (typeof import("element-plus/es"))["ElTabs"]
- ElTag: (typeof import("element-plus/es"))["ElTag"]
- ElTooltip: (typeof import("element-plus/es"))["ElTooltip"]
  ErrorPage: typeof import('./../components/ErrorPage/index.vue')['default']
  Grid: typeof import('./../components/Grid/index.vue')['default']
  GridItem: typeof import('./../components/Grid/components/GridItem.vue')['default']
@@ -64,8 +33,4 @@ declare module 'vue' {
  VirtualScroll: typeof import('./../components/VirtualScroll/index.vue')['default']
  WangEditor: typeof import('./../components/WangEditor/index.vue')['default']
  }
- export interface ComponentCustomProperties {
- ProTable: (typeof import("./src/components/ProTable/index.vue"))["default"]
- vLoading: (typeof import("element-plus/es"))["ElLoadingDirective"]
- }
 }

vite/plugins/auto-import.ts

@@ -22,7 +22,7 @@ export default function createAutoImport() {
  "pinia",
  {
  from: "vue",
- imports: ["Directive", "DirectiveBinding", "App", "CSSProperties", "ElRef"],
+ imports: ["Directive", "DirectiveBinding", "App", "CSSProperties", "ElRef", "ComponentInternalInstance"],
  type: true
  }
  ],