全局注册按需加载 elementPlusIcons

elementPlusIcons

• 官网中有好几种引入的方式

• 这里我使用的是 第一种 Register All Icons

• 但是这一种是全部引入 这里我给他做了一个小优化 让他按需引入

  • 并且也将这种加载方式做了一个抽取 封装 之后其他类似的需要全局注册也在可以这么使用
  • 这样注册 main.ts 就不会臃肿 也提高了可读性

具体实现

• 注册一个全局的 gogal 函数

  • 这个函数在 main.ts 中注册

  • main.ts

    • import { createApp } from 'vue'
      import App from './App.vue'
      ​
      import ElementPlus from 'element-plus'
      // 全局的函数 其中过滤器也可以在这里面注册
      import { globalRegister } from './global'
      ​
      import router from './router'
      import store from './store'
      ​
      const app = createApp(App)
      app.use(ElementPlus)
      app.use(globalRegister)
      app.use(router)
      app.use(store)
      app.mount('#app')
      ​
      ​
      

  • global index.ts

    • import { App } from 'vue'
      // 具体的注册函数 在这里引入 统一注册
      import registerElement from './register-element'
      import registerElementIcons from './register-element-icon'
      ​
      export function globalRegister(app: App): void {
        app.use(registerElement)
        app.use(registerElementIcons)
      }
      

  • register-element-icon.ts

    • // 官网中的全局引入
      // import * as ElementPlusIconsVue from '@element-plus/icons-vue'
      // import { App } from 'vue'
      ​
      // export default function (app: App): void {
      //   for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
      //     app.component(key, component)
      //   }
      // }
      ​
      // 按需引入 之后使用哪个就引入注册一下就行了
      import { App } from 'vue'
      import { Location } from '@element-plus/icons-vue'
      ​
      const compIcons = {
        Location,
      }
      ​
      export default function (app: App): void {
        for (const [key, icon] of Object.entries(compIcons)) {
          app.component(key, icon)
        }
      }
      ​
      ​
      

总结

• 这种抽离的思想还是很重要的 可以降低耦合度 提高可读性
• 自己也在学习这种思想

\