refactor: 饿了么按需引入

jsxiaosi · Jan 19, 2022 · 2c6c117 · 2c6c117
1 parent 676973d
commit 2c6c117
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 14 deletions.
diff --git a/src/main.ts b/src/main.ts
@@ -8,10 +8,11 @@ import App from './App.vue';
 // Register icon sprite
 // import 'virtual:svg-icons-register'
 
-import { configMainElementPlus, configMainGlobalProperties, getServerConfig } from './utils';
+import { configMainGlobalProperties, getServerConfig } from './utils';
 import { configMainStore } from './store';
 import { configMainI18n } from './locales';
 import { configMainRouter } from './router';
+import { useElementPlus } from './utils/plugin/element';
 
 const app = createApp(App);
 
@@ -29,7 +30,7 @@ getServerConfig().then((_config) => {
   configMainI18n(app);
 
   // ElementPlus
-  configMainElementPlus(app);
+  useElementPlus(app);
 
   app.mount('#app');
 });
diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,23 +1,23 @@
 import { App } from 'vue';
-import * as ElIconModules from '@element-plus/icons-vue';
-import ElementPlus from 'element-plus';
+// import * as ElIconModules from '@element-plus/icons-vue';
+// import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
 import 'es6-promise/auto';
 import 'virtual:svg-icons-register';
 import { setWindowAppConfig } from '@/store/modules/app';
 
 // 注册element-plus icon
-export const configMainElementPlus = (app: App<Element>): void => {
-  app.use(ElementPlus);
-  const myElIconModules: any = ElIconModules;
-  for (const iconName in myElIconModules) {
-    app.component(transElIconName(iconName), myElIconModules[iconName]);
-  }
-};
+// export const configMainElementPlus = (app: App<Element>): void => {
+//   // app.use(ElementPlus);
+//   // const myElIconModules: any = ElIconModules;
+//   // for (const iconName in myElIconModules) {
+//   //   app.component(transElIconName(iconName), myElIconModules[iconName]);
+//   // }
+// };
 
-const transElIconName = (iconName: string): string => {
-  return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase());
-};
+// const transElIconName = (iconName: string): string => {
+//   return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase());
+// };
 
 // 定义全局钩子
 export const configMainGlobalProperties = (app: App<Element>): void => {

diff --git a/src/utils/plugin/element.ts b/src/utils/plugin/element.ts
@@ -0,0 +1,83 @@
+import { App, Component } from 'vue';
+import {
+  ElTag,
+  ElButton,
+  ElInput,
+  ElScrollbar,
+  ElMenu,
+  ElMenuItem,
+  ElSubMenu,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElIcon,
+  ElTooltip,
+  ElDrawer,
+  ElRow,
+  ElCol,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElForm,
+  ElFormItem,
+  ElAlert,
+  // 指令
+  ElLoading,
+  ElInfiniteScroll,
+} from 'element-plus';
+
+// Directives
+const plugins = [ElLoading, ElInfiniteScroll];
+
+const components = [
+  ElTag,
+  ElButton,
+  ElInput,
+  ElScrollbar,
+  ElMenu,
+  ElMenuItem,
+  ElSubMenu,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElIcon,
+  ElTooltip,
+  ElDrawer,
+  ElRow,
+  ElCol,
+  ElCard,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElForm,
+  ElFormItem,
+  ElAlert,
+];
+
+// https://element-plus.org/zh-CN/component/icon.html
+import { HomeFilled, Avatar, Operation, Grid, Setting } from '@element-plus/icons-vue';
+
+// Icon
+export const iconComponents = [HomeFilled, Avatar, Operation, Grid, Setting];
+
+export function useElementPlus(app: App) {
+  // 注册组件
+  components.forEach((component: Component) => {
+    app.component(component.name as string, component);
+  });
+  // 注册指令
+  plugins.forEach((plugin) => {
+    app.use(plugin);
+  });
+  // 注册图标
+  iconComponents.forEach((component: Component) => {
+    app.component(transElIconName(component.name as string), component);
+  });
+}
+
+const transElIconName = (iconName: string): string => {
+  return 'iEL' + iconName.replace(/[A-Z]/g, (match) => '-' + match.toLowerCase());
+};