1. 在 vite 構(gòu)建的 vue3 項目中安裝 ant-design-vue
npm i ant-design-vue -S
2. 安裝 less (如果用 webpack 構(gòu)建還要安裝 less-loader）
npm i less -D
3. 安裝 unplugin-vue-components 用于按需引入 ant design vue
npm i unplugin-vue-components -D
4. 然后在vite.config.js配置：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
AntDesignVueResolver({
importStyle: 'less', // 一定要開啟這個配置項
}),
],
}),
],
css: {
preprocessorOptions: {
less: {
modifyVars: { // 在這里自定義主題色等樣式
'primary-color': '#1da57a',
'link-color': '#1da57a',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
})
這樣就完事兒了～
5. 如果想要通過引入樣式文件來自定義主題色严拒，可以：
在vite.config.js修改：
AntDesignVueResolver({ importStyle: "false" })]
然后在app.vue中引入這個全局樣式文件：
<style lang="less">
@import "./assets/global.less";
</style>
新建一個樣式文件匠童，比如global.less：
@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 樣式入口文件
// 以下下內(nèi)容用于覆蓋上面定義的變量
@primary-color: #1da57a; // 自定義全局主色
@link-color: #535bf2; // 自定義鏈接色
所有的顏色變量可以在這里查看 ?? style/themes/default.less
