refactor: 饿了么样式按需引入

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

Hide file tree

Showing 10 changed files with 104 additions and 90 deletions.
diff --git a/build/vite/plugin/compress.ts b/build/vite/plugin/compress.ts
@@ -2,36 +2,36 @@
  * 用于打包和输出gzip
  * https://github.com/anncwb/vite-plugin-compression/blob/main/README.zh_CN.md
  */
-import viteCompression from 'vite-plugin-compression'
+import viteCompression from 'vite-plugin-compression';
 
-import type { Plugin } from 'vite'
+import type { Plugin } from 'vite';
 
 export function configCompressPlugin(
-	compress: 'gzip' | 'brotli' | 'none',
-	deleteOriginFile = false
+  compress: 'gzip' | 'brotli' | 'none',
+  deleteOriginFile = false,
 ): Plugin | Plugin[] {
-	let options = {}
-	if (compress === 'gzip') {
-		options = {
-			ext: '.gz',
-			algorithm: 'gzip',
-		}
-	}
-	if (compress === 'brotli') {
-		options = {
-			ext: '.br',
-			algorithm: 'brotliCompress',
-		}
-	}
-	const plugin: Plugin[] = [
-		viteCompression({
-			verbose: true,
-			disable: true,
-			threshold: 1500,
-			deleteOriginFile,
-			...options,
-		}),
-	]
+  let options = {};
+  if (compress === 'gzip') {
+    options = {
+      ext: '.gz',
+      algorithm: 'gzip',
+    };
+  }
+  if (compress === 'brotli') {
+    options = {
+      ext: '.br',
+      algorithm: 'brotliCompress',
+    };
+  }
+  const plugin: Plugin[] = [
+    viteCompression({
+      verbose: true,
+      disable: true,
+      threshold: 1500,
+      deleteOriginFile,
+      ...options,
+    }),
+  ];
 
-	return plugin
+  return plugin;
 }
diff --git a/build/vite/plugin/index.ts b/build/vite/plugin/index.ts
@@ -14,6 +14,9 @@ import { configSvgPlugin } from './svg';
 import { configCompressPlugin } from './compress';
 // mock
 import { configMockPlugin } from './mock';
+// 按需element样式
+import ElementPlus from 'unplugin-element-plus/vite';
+
 // eslint
 // import { configEsLinterPlugin } from './eslinter'
 
@@ -32,6 +35,8 @@ export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
 
   vitePlugins.push(configMockPlugin(isBuild));
 
+  vitePlugins.push(ElementPlus());
+
   // 使用此插件会导致vite启动变慢 100ms左右
   // vitePlugins.push(configEsLinterPlugin(configEnv))
 

diff --git a/build/vite/plugin/style.ts b/build/vite/plugin/style.ts
@@ -7,24 +7,24 @@ import type { Plugin } from 'vite';
 
 export function configStylePlugin(): Plugin | Plugin[] {
   const options = {
-    libs: [
-      {
-        libraryName: 'element-plus',
-        esModule: true,
-        ensureStyleFile: true,
-        resolveStyle: (name: any) => {
-          name = name.slice(3);
-          // 使用element scss样式
-          return `element-plus/packages/theme-chalk/src/${name}.scss`;
-          // 使用element css样式
-          // return `element-plus/lib/theme-chalk/${name}.css`;
-        },
-        // resolveComponent: (name: any) => {
-        // 	console.log(name)
-        // 	return `element-plus/lib/${name}`
-        // },
-      },
-    ],
+    // libs: [
+    //   {
+    //     libraryName: 'element-plus',
+    //     esModule: true,
+    //     ensureStyleFile: true,
+    //     resolveStyle: (name: any) => {
+    //       name = name.slice(3);
+    //       // 使用element scss样式
+    //       return `element-plus/packages/theme-chalk/src/${name}.scss`;
+    //       // 使用element css样式
+    //       // return `element-plus/lib/theme-chalk/${name}.css`;
+    //     },
+    //     // resolveComponent: (name: any) => {
+    //     // 	console.log(name)
+    //     // 	return `element-plus/lib/${name}`
+    //     // },
+    //   },
+    // ],
   };
   const plugin: Plugin[] = [styleImport(options)];
   return plugin;

diff --git a/build/vite/plugin/svg.ts b/build/vite/plugin/svg.ts
@@ -2,17 +2,17 @@
  * svg
  * https://github.com/anncwb/vite-plugin-svg-icons/blob/main/README.zh_CN.md
  */
-import viteSvgIcons from 'vite-plugin-svg-icons'
-import path from 'path'
+import viteSvgIcons from 'vite-plugin-svg-icons';
+import path from 'path';
 
 export function configSvgPlugin() {
-	const svgPlugin = viteSvgIcons({
-		// 指定需要缓存的图标文件夹
-		iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
-		// 压缩配置
-		// svgoOptions: false,
-		// 指定symbolId格式
-		symbolId: 'icon-[dir]-[name]',
-	})
-	return svgPlugin
+  const svgPlugin = viteSvgIcons({
+    // 指定需要缓存的图标文件夹
+    iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
+    // 压缩配置
+    // svgoOptions: false,
+    // 指定symbolId格式
+    symbolId: 'icon-[dir]-[name]',
+  });
+  return svgPlugin;
 }
diff --git a/package.json b/package.json
@@ -82,6 +82,7 @@
     "stylelint-order": "^5.0.0",
     "stylelint-scss": "^4.0.1",
     "typescript": "^4.5.4",
+    "unplugin-element-plus": "^0.2.0",
     "vite": "^2.7.3",
     "vite-plugin-compression": "^0.3.6",
     "vite-plugin-linter": "^1.0.2",

diff --git a/src/components/Form/componentMap.ts b/src/components/Form/componentMap.ts
@@ -1,18 +1,18 @@
 import type { Component } from 'vue';
-import { ElInput, ElDatePicker, ElCascader, ElSelect, ElCheckbox, ElRadio } from 'element-plus';
+// import { ElInput, ElDatePicker, ElCascader, ElSelect, ElCheckbox, ElRadio } from 'element-plus';
 
 const componentMap = new Map<string, Component>();
 
-componentMap.set('ElInput', ElInput);
-componentMap.set('ElDatePicker', ElDatePicker);
-componentMap.set('ElCascader', ElCascader);
+// componentMap.set('ElInput', ElInput);
+// componentMap.set('ElDatePicker', ElDatePicker);
+// componentMap.set('ElCascader', ElCascader);
 
-componentMap.set('ElSelect', ElSelect);
-componentMap.set('ElOption', ElSelect.Option);
-componentMap.set('ElCheckbox', ElCheckbox);
-componentMap.set('ElCheckboxGroup', ElCheckbox.CheckboxGroup);
-componentMap.set('ElRadio', ElRadio);
-componentMap.set('ElRadioGroup', ElRadio.RadioGroup);
+// componentMap.set('ElSelect', ElSelect);
+// componentMap.set('ElOption', ElSelect.Option);
+// componentMap.set('ElCheckbox', ElCheckbox);
+// componentMap.set('ElCheckboxGroup', ElCheckbox.CheckboxGroup);
+// componentMap.set('ElRadio', ElRadio);
+// componentMap.set('ElRadioGroup', ElRadio.RadioGroup);
 
 const elComponentItem: Recordable = {
   ElSelect: 'ElOption',

diff --git a/src/components/Form/src/components/FormItem.vue b/src/components/Form/src/components/FormItem.vue
@@ -1,7 +1,7 @@
 <script lang="tsx">
   import { isFunction } from '@/utils/is';
-  import { defineComponent, PropType, Slots } from 'vue';
-  import { componentMap, elComponentItem } from '../../componentMap';
+  import { defineComponent, PropType, resolveComponent, Slots } from 'vue';
+  import { elComponentItem } from '../../componentMap';
   import { FormItemListProps } from '../../types/from';
   export default defineComponent({
     props: {
@@ -23,7 +23,8 @@
       };
 
       function renderComponent() {
-        const Comp = componentMap.get(formItem.component) as ReturnType<typeof defineComponent>;
+        // const Comp = componentMap.get(formItem.component) as ReturnType<typeof defineComponent>;
+        const Comp = resolveComponent(formItem.component) as ReturnType<typeof defineComponent>;
         return (
           <Comp v-model={formModel[formItem.prop]} {...formItem.props}>
             {childrenComponent()}
@@ -35,7 +36,9 @@
         if (formItem.childrenComponent) {
           const { options } = formItem.childrenComponent;
           const compName = elComponentItem[formItem.component];
-          const Comp = componentMap.get(compName) as ReturnType<typeof defineComponent>;
+          // const Comp = componentMap.get(compName) as ReturnType<typeof defineComponent>;
+          const Comp = resolveComponent(compName) as ReturnType<typeof defineComponent>;
+
           return (
             <>
               {options?.map((res) => (

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -1,24 +1,7 @@
 import { App } from 'vue';
-// 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]);
-//   // }
-// };
-
-// 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
@@ -23,6 +23,14 @@ import {
   ElForm,
   ElFormItem,
   ElAlert,
+  ElDatePicker,
+  ElCascader,
+  ElSelect,
+  ElOption,
+  ElCheckboxGroup,
+  ElCheckbox,
+  ElRadioGroup,
+  ElRadio,
   // 指令
   ElLoading,
   ElInfiniteScroll,
@@ -55,6 +63,14 @@ const components = [
   ElForm,
   ElFormItem,
   ElAlert,
+  ElDatePicker,
+  ElCascader,
+  ElSelect,
+  ElOption,
+  ElCheckboxGroup,
+  ElCheckbox,
+  ElRadioGroup,
+  ElRadio,
 ];
 
 // https://element-plus.org/zh-CN/component/icon.html

diff --git a/src/views/components/form/index.vue b/src/views/components/form/index.vue
@@ -23,7 +23,6 @@
     textarea: number;
   }>({ textarea: 0 });
 
-  console.log(h);
   const cascaderOptions = [
     {
       value: 'guide',
@@ -327,6 +326,10 @@
             prop: 'cascader',
             props: {
               options: cascaderOptions,
+              props: {
+                value: 'value',
+                label: 'label',
+              },
               onVisibleChange: (e: any) => {
                 console.log(e);
               },
@@ -388,10 +391,13 @@
             component: '',
             label: 'render组件',
             prop: 'renderInput',
-            render: () => {
+            render: ({ formModel, formItem }) => {
               return h('input', {
                 placeholder: '请输入',
-                onChange: () => {},
+                value: formModel[formItem.prop],
+                onChange: (e: any) => {
+                  formModel[formItem.prop] = e.target.value;
+                },
               });
             },
           },