为避免不必要麻烦,需要确认的信息写在开头,因为高版本的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)