1. Install ant-design-vue in the vue3 project built by vite
npm i ant-design-vue -S
2. Install less (because the style of ant-design is less)
npm i less -D
3. Install unplugin-vue-components to introduce ant design vue on demand
npm i unplugin-vue-components -D
4. Then vite.config.js
configure:
/*
* @Author: chuxiuli [email protected]
* @Date: 2023-02-16 15:58:03
* @LastEditors: chuxiuli [email protected]
* @LastEditTime: 2023-02-17 16:30:50
* @FilePath: \chizhou-ts-economyd:\project\vite\vite-project\vite.config.ts
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
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. Customize theme colors by introducing style files
在vite.config.js修改:
AntDesignVueResolver({ importStyle: "false" })]
Then app.vue
introduce this global style file in:
<style lang="less">
@import "./assets/global.less";
</style>
Create a new style file, such as global.less
:
@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
// 以下下内容用于覆盖上面定义的变量
@primary-color: #1da57a; // 自定义全局主色
@link-color: #535bf2; // 自定义链接色