vue3+typescript 按需加载element-plus

1. 安装element-plus                     npm install element-plus --save
2. 安装 babel-plugin-import          npm install babel-plugin-import -D
3. 安装sass  sass-loader              npm install sass sass-loader@10.1.1 -D
4. 配置babel.config.js

   module.exports = {
     presets: [
       '@vue/cli-plugin-babel/preset'
     ],
     plugins: [
       [
         "import",
         {
           libraryName: 'element-plus',
           customStyleName: (name) => {
             name = name.slice(3)
             return `element-plus/packages/theme-chalk/src/${name}.scss`;
           },
         },
       ],
     ]
   }

    

5. 在src目录下创建plugins文件夹，在plugins文件夹下创建ElementPlus.ts文件
6. 在ElementPlus.ts 文件中按需引入

   import { App } from 'vue'
   
   import {
       ElAlert,
       ElAside,
       ElAutocomplete,
       ElAvatar,
       ElBacktop,
       ElBadge,
       ElBreadcrumb,
       ElBreadcrumbItem,
       ElButton,
       ElButtonGroup,
       ElCalendar,
       ElCard,
       ElCarousel,
       ElCarouselItem,
       ElCascader,
       ElCascaderPanel,
       ElCheckbox,
       ElCheckboxButton,
       ElCheckboxGroup,
       ElCol,
       ElCollapse,
       ElCollapseItem,
       ElCollapseTransition,
       ElColorPicker,
       ElContainer,
       ElDatePicker,
       ElDialog,
       ElDivider,
       ElDrawer,
       ElDropdown,
       ElDropdownItem,
       ElDropdownMenu,
       ElFooter,
       ElForm,
       ElFormItem,
       ElHeader,
       ElIcon,
       ElImage,
       ElInput,
       ElInputNumber,
       ElLink,
       ElMain,
       ElMenu,
       ElMenuItem,
       ElMenuItemGroup,
       ElOption,
       ElOptionGroup,
       ElPageHeader,
       ElPagination,
       ElPopconfirm,
       ElPopover,
       ElPopper,
       ElProgress,
       ElRadio,
       ElRadioButton,
       ElRadioGroup,
       ElRate,
       ElRow,
       ElScrollbar,
       ElSelect,
       ElSlider,
       ElStep,
       ElSteps,
       ElSubmenu,
       ElSwitch,
       ElTabPane,
       ElTable,
       ElTableColumn,
       ElTabs,
       ElTag,
       ElTimePicker,
       ElTimeSelect,
       ElTimeline,
       ElTimelineItem,
       ElTooltip,
       ElTransfer,
       ElTree,
       ElUpload,
       ElInfiniteScroll,
       ElLoading,
       ElMessage,
       ElMessageBox,
       ElNotification
   } from 'element-plus';
   
   import "element-plus/packages/theme-chalk/src/base.scss"
   import lang from 'element-plus/lib/locale/lang/zh-cn'
   import 'dayjs/locale/zh-cn'
   import locale from 'element-plus/lib/locale'
   
   // 设置语言
   locale.use(lang)
   
   const components = [
       ElAlert,
       ElAside,
       ElAutocomplete,
       ElAvatar,
       ElBacktop,
       ElBadge,
       ElBreadcrumb,
       ElBreadcrumbItem,
       ElButton,
       ElButtonGroup,
       ElCalendar,
       ElCard,
       ElCarousel,
       ElCarouselItem,
       ElCascader,
       ElCascaderPanel,
       ElCheckbox,
       ElCheckboxButton,
       ElCheckboxGroup,
       ElCol,
       ElCollapse,
       ElCollapseItem,
       ElCollapseTransition,
       ElColorPicker,
       ElContainer,
       ElDatePicker,
       ElDialog,
       ElDivider,
       ElDrawer,
       ElDropdown,
       ElDropdownItem,
       ElDropdownMenu,
       ElFooter,
       ElForm,
       ElFormItem,
       ElHeader,
       ElIcon,
       ElImage,
       ElInput,
       ElInputNumber,
       ElLink,
       ElMain,
       ElMenu,
       ElMenuItem,
       ElMenuItemGroup,
       ElOption,
       ElOptionGroup,
       ElPageHeader,
       ElPagination,
       ElPopconfirm,
       ElPopover,
       ElPopper,
       ElProgress,
       ElRadio,
       ElRadioButton,
       ElRadioGroup,
       ElRate,
       ElRow,
       ElScrollbar,
       ElSelect,
       ElSlider,
       ElStep,
       ElSteps,
       ElSubmenu,
       ElSwitch,
       ElTabPane,
       ElTable,
       ElTableColumn,
       ElTabs,
       ElTag,
       ElTimePicker,
       ElTimeSelect,
       ElTimeline,
       ElTimelineItem,
       ElTooltip,
       ElTransfer,
       ElTree,
       ElUpload,
   ]
   
   const plugins = [
       ElInfiniteScroll,
       ElLoading,
       ElMessage,
       ElMessageBox,
       ElNotification,
   ]
   
   export const ElementPlus = {
       install: (app: App<Element>): void => {
   
           components.forEach((component) => {
               app.component(component.name, component)
           })
   
           plugins.forEach((plugin) => {
               app.use(plugin)
           })
   
           // 全局配置
           app.config.globalProperties.$ELEMENT = { size: 'small', zIndex: 3000 }
       }
   }

    

7. 在main.ts文件中引入ElementPlus.ts文件

   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   import { ElementPlus } from "./plugins/ElementPlus";
   
   createApp(App).use(store).use(router).use(ElementPlus).mount('#app')