✨ feat: element-plus和vue按需导入

components.d.ts

@@ -43,6 +43,8 @@ declare module 'vue' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElForm: typeof import('element-plus/es')['ElForm']
+    ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElImage: typeof import('element-plus/es')['ElImage']
@@ -65,6 +67,7 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    FileUploader: typeof import('./src/components/FileUploader/index.vue')['default']
     ForeignKey: typeof import('./src/components/foreignKey/index.vue')['default']
     IconSelector: typeof import('./src/components/iconSelector/index.vue')['default']
     ImportExcel: typeof import('./src/components/importExcel/index.vue')['default']
@@ -74,6 +77,7 @@ declare module 'vue' {
     ManyToMany: typeof import('./src/components/manyToMany/index.vue')['default']
     MCard: typeof import('./src/components/MetricsCards/mCard.vue')['default']
     MetricsCards: typeof import('./src/components/MetricsCards/index.vue')['default']
+    MonthRangePicker: typeof import('./src/components/MonthRangePicker/index.vue')['default']
     NoticeBar: typeof import('./src/components/noticeBar/index.vue')['default']
     PieBarChart: typeof import('./src/components/echartsComponents/PieBarChart.vue')['default']
     RangeFloat: typeof import('./src/components/range-float/index.vue')['default']
@@ -91,6 +95,7 @@ declare module 'vue' {
     TextSelector: typeof import('./src/components/TextSelector/index.vue')['default']
     TimerBidTable: typeof import('./src/components/TimerBidTable/index.vue')['default']
     TimerBudgetTable: typeof import('./src/components/TimerBudgetTable/index.vue')['default']
+    WeekRangePicker: typeof import('./src/components/WeekRangePicker/index.vue')['default']
   }
   export interface ComponentCustomProperties {
     vInfiniteScroll: typeof import('element-plus/es')['ElInfiniteScroll']

src/auto-imports.d.ts

@@ -0,0 +1,83 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const createPinia: typeof import('pinia')['createPinia']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const defineStore: typeof import('pinia')['defineStore']
+  const effectScope: typeof import('vue')['effectScope']
+  const getActivePinia: typeof import('pinia')['getActivePinia']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const mapActions: typeof import('pinia')['mapActions']
+  const mapGetters: typeof import('pinia')['mapGetters']
+  const mapState: typeof import('pinia')['mapState']
+  const mapStores: typeof import('pinia')['mapStores']
+  const mapWritableState: typeof import('pinia')['mapWritableState']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const setActivePinia: typeof import('pinia')['setActivePinia']
+  const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const storeToRefs: typeof import('pinia')['storeToRefs']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}

src/main.ts

@@ -5,8 +5,9 @@ import { directive } from '/@/utils/directive'
 import { i18n } from '/@/i18n'
 import other from '/@/utils/other'
 import '/@/assets/style/tailwind.css' // 先引入tailwind css, 以免element-plus冲突
-import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
+// import ElementPlus from 'element-plus'
+// import 'element-plus/dist/index.css'
+import 'element-plus/es/components/menu/style/css'	// element-plus按需导入会导致菜单样式出现问题 单独导入
 import '/@/theme/index.scss'
 import mitt from 'mitt'
 import VueGridLayout from 'vue-grid-layout'
@@ -38,6 +39,7 @@ import UTC from 'dayjs/plugin/utc'
 import Timezon from 'dayjs/plugin/timezone'
 import IsSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import 'dayjs/locale/zh-cn'
+import { ElementPlus } from '@element-plus/icons-vue';
 
 dayjs.extend(UTC)
 dayjs.extend(Timezon)
@@ -66,6 +68,9 @@ other.elSvg(app)
 app.use(VXETable)
 app.use(permission)
 // @ts-ignore
-app.use(pinia).use(router).use(ElementPlus, { i18n: i18n.global.t }).use(i18n).use(VueGridLayout).use(fastCrud).mount('#app')
+app.use(pinia)
+    .use(router)
+    // .use(ElementPlus, { i18n: i18n.global.t })
+    .use(i18n).use(VueGridLayout).use(fastCrud).mount('#app')
 
 app.config.globalProperties.mittBus = mitt()

src/views/demo/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-button :loading="loading" v-bind="props" @click="handleClick"><slot></slot></el-button>
+  <el-button :loading="loading" v-bind="props" @click="handleClick"><slot>z</slot></el-button>
 </template>
 
 <script lang="ts" setup>

vite.config.ts

@@ -1,7 +1,7 @@
 import vue from '@vitejs/plugin-vue';
 import { resolve } from 'path';
 import { defineConfig, loadEnv, ConfigEnv } from 'vite';
-import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+// import vueSetupExtend from 'vite-plugin-vue-setup-extend';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import AutoImport from 'unplugin-auto-import/vite';
 import compression from 'vite-plugin-compression';
@@ -26,8 +26,16 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
       vueJsx(),
       // vueSetupExtend(),
       AutoImport({
-        imports: ['vue', 'vue-router', 'pinia'],
-        // resolvers: [ElementPlusResolver()],
+        imports: [
+          'vue',
+          'vue-router',
+          'pinia'
+        ],
+        resolvers: [ElementPlusResolver()],
+        dts: 'src/auto-imports.d.ts', // 生成 TypeScript 声明文件
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
       }),
       compression({
         algorithm: 'gzip', // 使用 gzip 压缩
@@ -35,9 +43,6 @@ const viteConfig = defineConfig((mode: ConfigEnv) => {
         threshold: 10240, // 只有大小大于该值的资源会被压缩（默认 10KB）
         deleteOriginFile: false, // 是否删除原始未压缩的文件
       }),
-      // Components({
-      //   resolvers: [ElementPlusResolver()],
-      // }),
     ],
     root: process.cwd(),
     resolve: { alias },