diff --git a/src/main.ts b/src/main.ts index 55865c7b2..d9b756e05 100644 --- a/src/main.ts +++ b/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); diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts.ts similarity index 100% rename from src/plugins/echarts/index.ts rename to src/plugins/echarts.ts index 131119a3b..cb62d9664 100644 --- a/src/plugins/echarts/index.ts +++ b/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, diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts deleted file mode 100644 index 072ae1f67..000000000 --- a/src/plugins/element-plus/index.ts +++ /dev/null @@ -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); - }); -} diff --git a/src/plugins/elementPlus.ts b/src/plugins/elementPlus.ts new file mode 100644 index 000000000..ddc664427 --- /dev/null +++ b/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); + }); +} diff --git a/types/global-components.d.ts b/types/global-components.d.ts index 54638a4a5..4ae804fe4 100644 --- a/types/global-components.d.ts +++ b/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 {