vite@5中 antd-vue / element-plue等UI库 按需引入方案

为避免不必要麻烦，需要确认的信息写在开头，因为高版本的antd-vue不支持这种按需引入，我用的版本是"ant-design-vue": "^3.2.20"

（高版本同学记得降版本。。。也意味着可能要重新更改:deep样式，哭哭）

正文开始：

1.下载组件（附带我下载的版本号）

"unplugin-auto-import": "^0.17.5",
"unplugin-vue-components": "^0.26.0"

2.在vite.config.js 中引入

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver, AntDesignVueResolver } from 'unplugin-vue-components/resolvers'   

 其中需要什么引入什么，不知道名字的看下面找到你需要的（就是unplugin-vue-components/resolvers插件暴露的内容可自行查找），为了方便看加了换行（贴心嘻嘻）

export { AllowResolveIconOption, AntDesignVueResolver, 
AntDesignVueResolverOptions, ArcoResolver, 
ArcoResolverOptions, 
BootstrapVue3Resolver, BootstrapVueNextResolver, 
BootstrapVueResolver, BootstrapVueResolverOptions,
 DevResolverOptions, DevUiResolver, 
DisallowResolveIconOption, ElementPlusResolver,
 ElementPlusResolverOptions, ElementUiResolver, 
ElementUiResolverOptions, HeadlessUiResolver, 
HeadlessUiResolverOptions, IduxResolver,
 IduxResolverOptions, InklineResolver, IonicBuiltInComponents,
 IonicResolver, LayuiVueResolver, LayuiVueResolverOptions, 
NaiveUiResolver, PrimeVueResolver, PrimeVueResolverOptions,
 QuasarResolver, ResolveIconsOption, TDesignResolver, 
TDesignResolverOptions, VantResolver, VantResolverOptions, 
VarletUIResolver, VarletUIResolverOptions, VeuiResolver,
 VeuiResolverOptions, ViewUiResolver, VueUseComponentsResolver, 
VueUseDirectiveResolver, Vuetify3Resolver, VuetifyResolver, getResolved };

 3.使用（只包含了需要添加的部分）

export default defineConfig({
  plugins: [

   ......
   ......

  // 按需引入
  AutoImport({
    resolvers: [ElementPlusResolver()，AntDesignVueResolver()], // 需要按需引入什么就填什么
  }),
  Components({
    resolvers: [ElementPlusResolver(), AntDesignVueResolver({ importStyle: true, resolveIcons: true })],
  }),

  ],


  ......
  ......

})

4.最后，记得在main.js里注释掉全局引入的内容（同样只提供了更改部分），结束撒花

// import Antd from 'ant-design-vue';
// import 'ant-design-vue/dist/reset.css';
import 'ant-design-vue/dist/antd.css';

// import ElementPlus from 'element-plus'  //引入element-plus库
import 'element-plus/dist/index.css'  //引入element-plus样式

let app = createApp(App)
app.use(pinia).use(router)
    // .use(Antd)
    // .use(ElementPlus)