vue3 + vite3 按需引入 ant design vue 并自定义主题

1. 在 vite 构建的 vue3 项目中安装 ant-design-vue

npm i ant-design-vue -S

2. 安装 less (如果用 webpack 构建还要安装 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中引入这个全局样式文件：

新建一个样式文件，比如global.less：

@import "ant-design-vue/dist/antd.less"; // 引入官方提供的 less 样式入口文件
// 以下下内容用于覆盖上面定义的变量
@primary-color: #1da57a; // 自定义全局主色
@link-color: #535bf2; // 自定义链接色

所有的颜色变量可以在这里查看 ➡️ style/themes/default.less