Ant Design Vue 按需引入+自定义主题

前言

最近用 Vue3 + vite + pinia 开发项目，UI组件原本是打算用 Element Plus，不过公司最终决定使用 Ant Design of Vue 作为新项目的UI组件。无奈之下，我将安装完的 Element Plus 卸载换成了 Ant Design Vue 。

因为是第一次接触 Ant Design Vue 组件库，在使用过程中踩了一些坑，为了避免下次还会踩到同样的坑，因此决定写一篇博客，记录一下使用的方法，同时分享自己的经验。

组件库当然是要按需引入的，完整引入不符合轻量化的需求，因此，本文仅讲述按需引入的方法。想知道其它引入方法的可以查看 Ant Design Vue 官方文档，里面会有详细的说明。

一、安装

这一步很简单，不做过多描述。以下 3 种方法皆可。安装 cnpm 和淘宝镜像推荐阅读这篇文章 安装 cnpm 和淘宝镜像方法。

# npm
npm i ant-design-vue --save
# cnpm
cnpm i ant-design-vue --save
# yarn
yarn add ant-design-vue

# vite 按需引入插件
npm i unplugin-vue-components -D

二、引入

vite.config.ts

import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default {
  plugins: [
    /* ... */
    Components({
      resolvers: [AntDesignVueResolver({ importStyle: 'less' })],
    }),
  ],
};

注意： unplugin-vue-components 插件无法处理非组件模块，如 message，这种组件需要手动加载。

你可以选择全局引入此部分样式，也可以在单文件中引入，示例为全局引入。

main.ts

import 'ant-design-vue/es/message/style/css'

三、使用

这一步也不困难，非组件模块需要单独引入，如 message 。

.vue

<script setup lang='ts'>
import { onMounted } from 'vue'
import { message } from 'ant-design-vue';

onMounted(() => {
    message.success('登录成功')
})
</script>

<template>
    <a-button type="primary">Primary Button</a-button>
</template>

一些组件中的方法也需要单独引入，如 Form 。

.vue or .ts

import { reactive } from 'vue'
import { Form } from 'ant-design-vue';

const rulesRef = reactive({
    username: [
        {
            required: true,
            message: '请输入账号',
        },
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
        },
    ],
    code: [
        {
            required: true,
            message: '请输入验证码',
        },
    ],
})

const useForm = Form.useForm;
const { validate, validateInfos } = useForm(formState, rulesRef); // 校验方法、校验规则
const onSubmit = () => {
    validate().then(() => {
        message.success('校验通过')
    })
}

四、自定义主题

Ant Design Vue 是支持自定义主题的，实现方法也很简单。当然，只是一定程度上的自定义，包括但不限于主色、圆角、边框和部分组件的视觉定制。

在 src 目录下创建 style 文件夹，再在 style 创建一个 less 样式文件，并在 vite.config.ts 中混入。我原本想用 scss 去写，但由于 antd 的样式使用了 Less 作为开发语言，所以我决定同样使用 Less 去处理样式，防止出现不可预知的错误。

src/style/ant-design.less

@primary-color: #3563EC; // 全局主色
@link-color: #3563EC; // 链接色
@success-color: #52C41A; // 成功色
@warning-color: #FAAD14; // 警告色
@error-color: #FF4D4F ; // 错误色
@font-size-base: 14px; // 主字号
@heading-color: #3D3D3D; // 标题色
@text-color: #1D2129; // 主文本色
@text-color-secondary: #4E5969; // 次文本色
@disabled-color: #5E83F0; // 失效色
@border-radius-base: 8px; // 组件/浮层圆角
@border-color-base: #F1F3F6; // 边框色
@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.16); // 浮层阴影
@table-header-bg: #F6F7FA; // 表格头背景
@table-border-color: #F1F3F6; // 表格边框

以上这些这些变量是一些常用变量，还有更多的变量可定制，详细配置项可以查看 github 中的原文件。

点击查看 – 详细变量配置表

vite.config.ts

export default defineConfig(() => {
  return {
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: `true; @import '@/style/ant-design.less';`
          },
          javascriptEnabled: true
        }
      }
    }
  }
})

END