perf: 更新`src/plugins`文件，更明确的注释说明

src/main.ts

@@ -1,12 +1,12 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "@/store";
-import ElementPlus from "element-plus";
 import { useI18n } from "@/plugins/i18n";
 import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
+import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
 import Table from "@pureadmin/table";
@@ -61,7 +61,7 @@ getPlatformConfig(app).then(async config => {
   app
     .use(MotionPlugin)
     .use(useI18n)
-    .use(ElementPlus)
+    .use(useElementPlus)
     .use(Table)
     .use(PureDescriptions)
     .use(useEcharts);

src/plugins/echarts/index.ts → src/plugins/echarts.ts

@@ -1,7 +1,7 @@
 import type { App } from "vue";
 import * as echarts from "echarts/core";
-import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import { PieChart, BarChart, LineChart } from "echarts/charts";
+import { CanvasRenderer, SVGRenderer } from "echarts/renderers";
 import {
   GridComponent,
   TitleComponent,

src/plugins/element-plus/index.ts

@@ -1,141 +0,0 @@
-import type { App, Component } from "vue";
-import {
-  ElTag,
-  ElAffix,
-  ElSkeleton,
-  ElBreadcrumb,
-  ElBreadcrumbItem,
-  ElScrollbar,
-  ElSubMenu,
-  ElButton,
-  ElCol,
-  ElRow,
-  ElSpace,
-  ElDivider,
-  ElCard,
-  ElDropdown,
-  ElDialog,
-  ElMenu,
-  ElMenuItem,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElIcon,
-  ElInput,
-  ElForm,
-  ElFormItem,
-  ElPopover,
-  ElPopper,
-  ElTooltip,
-  ElDrawer,
-  ElPagination,
-  ElAlert,
-  ElRadio,
-  ElRadioButton,
-  ElRadioGroup,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElBacktop,
-  ElSwitch,
-  ElBadge,
-  ElTabs,
-  ElTabPane,
-  ElAvatar,
-  ElEmpty,
-  ElCollapse,
-  ElCollapseItem,
-  ElTable,
-  ElTableColumn,
-  ElLink,
-  ElColorPicker,
-  ElSelect,
-  ElOption,
-  ElTimeline,
-  ElTimelineItem,
-  ElResult,
-  ElSteps,
-  ElStep,
-  ElTree,
-  ElTreeV2,
-  ElPopconfirm,
-  ElCheckbox,
-  ElCheckboxGroup,
-  // 指令
-  ElLoading,
-  ElInfiniteScroll
-} from "element-plus";
-
-// Directives
-const plugins = [ElLoading, ElInfiniteScroll];
-
-const components = [
-  ElTag,
-  ElAffix,
-  ElSkeleton,
-  ElBreadcrumb,
-  ElBreadcrumbItem,
-  ElScrollbar,
-  ElSubMenu,
-  ElButton,
-  ElCol,
-  ElRow,
-  ElSpace,
-  ElDivider,
-  ElCard,
-  ElDropdown,
-  ElDialog,
-  ElMenu,
-  ElMenuItem,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElIcon,
-  ElInput,
-  ElForm,
-  ElFormItem,
-  ElPopover,
-  ElPopper,
-  ElTooltip,
-  ElDrawer,
-  ElPagination,
-  ElAlert,
-  ElRadio,
-  ElRadioButton,
-  ElRadioGroup,
-  ElDescriptions,
-  ElDescriptionsItem,
-  ElBacktop,
-  ElSwitch,
-  ElBadge,
-  ElTabs,
-  ElTabPane,
-  ElAvatar,
-  ElEmpty,
-  ElCollapse,
-  ElCollapseItem,
-  ElTree,
-  ElTreeV2,
-  ElPopconfirm,
-  ElCheckbox,
-  ElCheckboxGroup,
-  ElTable,
-  ElTableColumn,
-  ElLink,
-  ElColorPicker,
-  ElSelect,
-  ElOption,
-  ElTimeline,
-  ElTimelineItem,
-  ElResult,
-  ElSteps,
-  ElStep
-];
-
-export function useElementPlus(app: App) {
-  // 注册组件
-  components.forEach((component: Component) => {
-    app.component(component.name, component);
-  });
-  // 注册指令
-  plugins.forEach(plugin => {
-    app.use(plugin);
-  });
-}

src/plugins/elementPlus.ts

@@ -0,0 +1,242 @@
+// 按需引入element-plus（该方法稳定且明确。当然也支持：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5）
+import type { App, Component } from "vue";
+import {
+  /**
+   * 为了方便演示平台将 element-plus 导出的所有组件引入，实际使用中如果你没用到哪个组件，将其注释掉就行
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/component.ts#L111-L211
+   * */
+  ElAffix,
+  ElAlert,
+  ElAutocomplete,
+  ElAutoResizer,
+  ElAvatar,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckTag,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElConfigProvider,
+  ElContainer,
+  ElAside,
+  ElFooter,
+  ElHeader,
+  ElMain,
+  ElDatePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElImage,
+  ElImageViewer,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElSubMenu,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElResult,
+  ElRow,
+  ElScrollbar,
+  ElSelect,
+  ElOption,
+  ElOptionGroup,
+  ElSelectV2,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElSlider,
+  ElSpace,
+  ElStatistic,
+  ElCountdown,
+  ElSteps,
+  ElStep,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTableV2,
+  ElTabs,
+  ElTabPane,
+  ElTag,
+  ElText,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElTreeSelect,
+  ElTreeV2,
+  ElUpload,
+  ElWatermark,
+  ElTour,
+  ElTourStep,
+  /**
+   * 为了方便演示平台将 element-plus 导出的所有插件引入，实际使用中如果你没用到哪个插件，将其注释掉就行
+   * 导出来源：https://github.com/element-plus/element-plus/blob/dev/packages/element-plus/plugin.ts#L11-L16
+   * */
+  ElLoading, // v-loading 指令
+  ElInfiniteScroll, // v-infinite-scroll 指令
+  ElPopoverDirective, // v-popover 指令
+  ElMessage, // $message 全局属性对象globalProperties
+  ElMessageBox, // $msgbox、$alert、$confirm、$prompt 全局属性对象globalProperties
+  ElNotification // $notify 全局属性对象globalProperties
+} from "element-plus";
+
+const components = [
+  ElAffix,
+  ElAlert,
+  ElAutocomplete,
+  ElAutoResizer,
+  ElAvatar,
+  ElBacktop,
+  ElBadge,
+  ElBreadcrumb,
+  ElBreadcrumbItem,
+  ElButton,
+  ElButtonGroup,
+  ElCalendar,
+  ElCard,
+  ElCarousel,
+  ElCarouselItem,
+  ElCascader,
+  ElCascaderPanel,
+  ElCheckTag,
+  ElCheckbox,
+  ElCheckboxButton,
+  ElCheckboxGroup,
+  ElCol,
+  ElCollapse,
+  ElCollapseItem,
+  ElCollapseTransition,
+  ElColorPicker,
+  ElConfigProvider,
+  ElContainer,
+  ElAside,
+  ElFooter,
+  ElHeader,
+  ElMain,
+  ElDatePicker,
+  ElDescriptions,
+  ElDescriptionsItem,
+  ElDialog,
+  ElDivider,
+  ElDrawer,
+  ElDropdown,
+  ElDropdownItem,
+  ElDropdownMenu,
+  ElEmpty,
+  ElForm,
+  ElFormItem,
+  ElIcon,
+  ElImage,
+  ElImageViewer,
+  ElInput,
+  ElInputNumber,
+  ElLink,
+  ElMenu,
+  ElMenuItem,
+  ElMenuItemGroup,
+  ElSubMenu,
+  ElPageHeader,
+  ElPagination,
+  ElPopconfirm,
+  ElPopover,
+  ElPopper,
+  ElProgress,
+  ElRadio,
+  ElRadioButton,
+  ElRadioGroup,
+  ElRate,
+  ElResult,
+  ElRow,
+  ElScrollbar,
+  ElSelect,
+  ElOption,
+  ElOptionGroup,
+  ElSelectV2,
+  ElSkeleton,
+  ElSkeletonItem,
+  ElSlider,
+  ElSpace,
+  ElStatistic,
+  ElCountdown,
+  ElSteps,
+  ElStep,
+  ElSwitch,
+  ElTable,
+  ElTableColumn,
+  ElTableV2,
+  ElTabs,
+  ElTabPane,
+  ElTag,
+  ElText,
+  ElTimePicker,
+  ElTimeSelect,
+  ElTimeline,
+  ElTimelineItem,
+  ElTooltip,
+  ElTransfer,
+  ElTree,
+  ElTreeSelect,
+  ElTreeV2,
+  ElUpload,
+  ElWatermark,
+  ElTour,
+  ElTourStep
+];
+
+const plugins = [
+  ElLoading,
+  ElInfiniteScroll,
+  ElPopoverDirective,
+  ElMessage,
+  ElMessageBox,
+  ElNotification
+];
+
+/** 按需引入`element-plus` */
+export function useElementPlus(app: App) {
+  // 全局注册组件
+  components.forEach((component: Component) => {
+    app.component(component.name, component);
+  });
+  // 全局注册插件
+  plugins.forEach(plugin => {
+    app.use(plugin);
+  });
+}

types/global-components.d.ts

@@ -111,6 +111,8 @@ declare module "vue" {
     ElResult: (typeof import("element-plus"))["ElResult"];
     ElSelectV2: (typeof import("element-plus"))["ElSelectV2"];
     ElWatermark: (typeof import("element-plus"))["ElWatermark"];
+    ElTour: (typeof import("element-plus"))["ElTour"];
+    ElTourStep: (typeof import("element-plus"))["ElTourStep"];
   }
 
   interface ComponentCustomProperties {