Register only used Element Plus components

web/apps/web-ele/src/bootstrap.ts

@@ -8,8 +8,6 @@ import '@vben/styles';
 import '@vben/styles/ele';
 
 import { useTitle } from '@vueuse/core';
-import ElementPlus from 'element-plus';
-import { ElLoading } from 'element-plus';
 
 import { $t, setupI18n } from '#/locales';
 
@@ -17,6 +15,7 @@ import { initComponentAdapter } from './adapter/component';
 import { initSetupVbenForm, useVbenForm } from './adapter/form';
 import App from './app.vue';
 import { setupZqTable } from './components/zq-table';
+import { setupElementPlus } from './plugins/element-plus';
 import { router } from './router';
 
 async function bootstrap(namespace: string) {
@@ -41,10 +40,7 @@ async function bootstrap(namespace: string) {
   // });
   const app = createApp(App);
 
-  app.use(ElementPlus);
+  setupElementPlus(app);
-
-  // 注册Element Plus提供的v-loading指令
-  app.directive('loading', ElLoading.directive);
 
   // 注册Vben提供的v-loading和v-spinning指令
   registerLoadingDirective(app, {

web/apps/web-ele/src/plugins/element-plus.ts

@@ -0,0 +1,145 @@
+import type { App, Plugin } from 'vue';
+
+import { ElAlert } from 'element-plus/es/components/alert/index';
+import { ElAvatar } from 'element-plus/es/components/avatar/index';
+import { ElBadge } from 'element-plus/es/components/badge/index';
+import {
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+} from 'element-plus/es/components/breadcrumb/index';
+import { ElButton, ElButtonGroup } from 'element-plus/es/components/button/index';
+import { ElCard } from 'element-plus/es/components/card/index';
+import { ElCascader } from 'element-plus/es/components/cascader/index';
+import {
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+} from 'element-plus/es/components/checkbox/index';
+import {
+  ElCollapse,
+  ElCollapseItem,
+} from 'element-plus/es/components/collapse/index';
+import { ElColorPicker } from 'element-plus/es/components/color-picker/index';
+import { ElConfigProvider } from 'element-plus/es/components/config-provider/index';
+import { ElDatePicker } from 'element-plus/es/components/date-picker/index';
+import {
+  ElDescriptions,
+  ElDescriptionsItem,
+} from 'element-plus/es/components/descriptions/index';
+import { ElDialog } from 'element-plus/es/components/dialog/index';
+import { ElDivider } from 'element-plus/es/components/divider/index';
+import { ElDrawer } from 'element-plus/es/components/drawer/index';
+import {
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+} from 'element-plus/es/components/dropdown/index';
+import { ElEmpty } from 'element-plus/es/components/empty/index';
+import { ElForm, ElFormItem } from 'element-plus/es/components/form/index';
+import { ElIcon } from 'element-plus/es/components/icon/index';
+import { ElImageViewer } from 'element-plus/es/components/image-viewer/index';
+import { ElInput } from 'element-plus/es/components/input/index';
+import { ElInputNumber } from 'element-plus/es/components/input-number/index';
+import { ElLoading } from 'element-plus/es/components/loading/index';
+import { ElPagination } from 'element-plus/es/components/pagination/index';
+import { ElPopconfirm } from 'element-plus/es/components/popconfirm/index';
+import { ElPopover } from 'element-plus/es/components/popover/index';
+import { ElProgress } from 'element-plus/es/components/progress/index';
+import {
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+} from 'element-plus/es/components/radio/index';
+import { ElScrollbar } from 'element-plus/es/components/scrollbar/index';
+import { ElOption, ElSelect } from 'element-plus/es/components/select/index';
+import {
+  ElSkeleton,
+  ElSkeletonItem,
+} from 'element-plus/es/components/skeleton/index';
+import { ElSlider } from 'element-plus/es/components/slider/index';
+import {
+  ElSplitter,
+  ElSplitterPanel,
+} from 'element-plus/es/components/splitter/index';
+import { ElSwitch } from 'element-plus/es/components/switch/index';
+import { ElTable, ElTableColumn } from 'element-plus/es/components/table/index';
+import { ElTabPane, ElTabs } from 'element-plus/es/components/tabs/index';
+import { ElTag } from 'element-plus/es/components/tag/index';
+import {
+  ElTimeline,
+  ElTimelineItem,
+} from 'element-plus/es/components/timeline/index';
+import { ElTooltip } from 'element-plus/es/components/tooltip/index';
+import { ElTree } from 'element-plus/es/components/tree/index';
+import { ElUpload } from 'element-plus/es/components/upload/index';
+
+const components: Plugin[] = [
+  ElAlert,
+  ElAvatar,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCard,
+  ElCascader,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCollapse,
+  ElCollapseItem,
+  ElColorPicker,
+  ElConfigProvider,
+  ElDatePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElImageViewer,
+  ElInput,
+  ElInputNumber,
+  ElOption,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElScrollbar,
+  ElSelect,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElSlider,
+  ElSplitter,
+  ElSplitterPanel,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTabPane,
+  ElTabs,
+  ElTag,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTree,
+  ElUpload,
+];
+
+function setupElementPlus(app: App) {
+  for (const component of components) {
+    app.use(component);
+  }
+
+  app.directive('loading', ElLoading.directive);
+}
+
+export { setupElementPlus };