refactor: main.ts

src/directives/index.ts

@@ -1 +1,7 @@
-export * from "./permission"
+import type { App } from "vue"
+import { permission } from "./permission"
+
+/** 挂载自定义指令 */
+export function loadDirectives(app: App) {
+  app.directive("permission", permission)
+}

src/icons/index.ts

@@ -1,7 +1,7 @@
-import { createApp } from "vue"
+import type { App } from "vue"
 import SvgIcon from "@/components/SvgIcon/index.vue" // Svg Component
 import "virtual:svg-icons-register"
 
-export default (app: ReturnType<typeof createApp>) => {
+export function loadSvg(app: App) {
   app.component("SvgIcon", SvgIcon)
 }

src/main.ts

@@ -1,14 +1,14 @@
+// core
 import { createApp } from "vue"
-import type { Directive } from "vue"
+import App from "@/App.vue"
-import store from "./store"
+import store from "@/store"
-import router from "./router"
+import router from "@/router"
 import "@/router/permission"
-import App from "./App.vue"
+// load
-import ElementPlus from "element-plus"
+import { loadSvg } from "@/icons"
-import loadSvg from "@/icons"
+import { loadPlugins } from "@/plugins"
-import * as directives from "@/directives"
+import { loadDirectives } from "@/directives"
-import * as ElementPlusIconsVue from "@element-plus/icons-vue"
+// css
-
 import "uno.css"
 import "normalize.css"
 import "element-plus/dist/index.css"
@@ -16,17 +16,12 @@ import "element-plus/theme-chalk/dark/css-vars.css"
 import "@/styles/index.scss"
 
 const app = createApp(App)
-/** Element-Plus 组件完整引入 */
+
-app.use(ElementPlus)
+/** 加载插件 */
-/** 注册所有 Element-Plus Icon */
+loadPlugins(app)
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component)
-}
 /** 加载全局 SVG */
 loadSvg(app)
-/** 自定义指令 */
+/** 加载自定义指令 */
-Object.keys(directives).forEach((key) => {
+loadDirectives(app)
-  app.directive(key, (directives as { [key: string]: Directive })[key])
-})
 
 app.use(store).use(router).mount("#app")

src/plugins/element-pus-icon/index.ts

@@ -0,0 +1,9 @@
+import type { App } from "vue"
+import * as ElementPlusIconsVue from "@element-plus/icons-vue"
+
+export function loadElementPlusIcon(app: App) {
+  /** 注册所有 Element-Plus Icon */
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+  }
+}

src/plugins/element-pus/index.ts

@@ -0,0 +1,7 @@
+import type { App } from "vue"
+import ElementPlus from "element-plus"
+
+export function loadElementPlus(app: App) {
+  /** Element-Plus 组件完整引入 */
+  app.use(ElementPlus)
+}

src/plugins/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue"
+import { loadElementPlus } from "./element-pus"
+import { loadElementPlusIcon } from "./element-pus-icon"
+
+export function loadPlugins(app: App) {
+  loadElementPlus(app)
+  loadElementPlusIcon(app)
+}