学习使用 Ant Design of Vue

简言

Ant Design of Vue 是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
为什么不用elementUI呢？因为。。。我最近在使用ant design vue。当然，你也可以使用elementUI，使用ui框架可以快速敏捷开发，个人项目无所谓。

使用ant design vue

下载包

项目路径下npm拉取包

npm i --save ant-design-vue

注册

全局完整注册

以上代码便完成了 Antd 的全局注册。需要注意的是，样式文件需要单独引入。

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);

app.use(Antd).mount('#app');

全局按需注册

import { createApp } from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

const app = createApp(App);

/* 会自动注册 Button 下的子组件, 例如 Button.Group */
app.use(Button).mount('#app');

app.config.globalProperties.$message = message;

局部注册

此种方式需要分别注册组件子组件，如 Button、ButtonGroup，并且注册后仅在当前组件中有效。所以我们推荐使用上述两种方式。

<template>
  <a-button>Add</a-button>
</template>
<script>
  import { Button } from 'ant-design-vue';
  const ButtonGroup = Button.Group;

  export default {
    components: {
      AButton: Button,
      AButtonGroup: ButtonGroup,
    },
  };
</script>

注册实操

为了方便，我们直接全局完整注册，另外注册下全局属性消息提示。

import { createApp } from 'vue'
import App from './App.vue'
//  router
import router from './router/index'
//  pinia
import pinia from './store'
//  自定义指令
import moveEnter from './utils/moveEnter'

//  注册 ant design vue
import antdV from 'ant-design-vue'
import { message } from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
//  vue实例
const app = createApp(App)
app.use(router)
app.use(pinia)

app.use(antdV)
app.mount('#app')

app.directive('move-enter', moveEnter)

//  定义全局属性
app.config.globalProperties.$message = message
app.provide('$message', message)

定制主题

ant design vue 支持自定义主题。ant-design-vue 的组件结构及样式和 Antd React 完全一致，你可以参考 Antd React 的定制方式进行配置。antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。我们使用 modifyVars 的方式来进行覆盖变量。

下载less

npm install less
npm install less-loader -D

配置主题文件

在assets/css下创建theme.less文件。在官网复制定义好的less变量，修改它们即可。

/**
  ant design vue 主题样式全局变量
*/
 
  @primary-color: #c77533; // 全局主色
  @link-color: #1890ff; // 链接色
  @success-color: #52c41a; // 成功色
  @warning-color: #faad14; // 警告色
  @error-color: #f5222d; // 错误色
  @font-size-base: 14px; // 主字号
  @heading-color: rgba(0, 0, 0, 0.85); // 标题色
  @text-color: rgba(0, 0, 0, 0.65); // 主文本色
  @text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
  @disabled-color: rgba(0, 0, 0, 0.25); // 失效色
  @border-radius-base: 2px; // 组件/浮层圆角
  @border-color-base: #d9d9d9; // 边框色
  @box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影

在vite.config.ts中修改less插件配置。

export default  defineConfig({
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            hack: 'true; @import "@/assets/css/theme.less"',
          },
          javascriptEnabled: true,
        }
      },
    },
  })

最后在main.ts引入的antd的全局样式文件后缀.css改成less，以便完成覆盖即可。

效果

另外为了方便查看css样式来源，在vite.config.ts的css配置项中可以开启sourcemap。

css:{
devSourcemap: true, //  开启sourcemap
}

结语

除了自定义主题外，还有国际化的配置，如果需要，可以去官网国际化了解。