当前位置：首页 > VUE

antd vue 实现

2026-02-10 00:25:08VUE

antd vue 实现方法

antd vue 是基于 Ant Design 设计规范的 Vue UI 组件库，提供丰富的组件和功能，适用于 Vue 2 和 Vue 3 项目。

安装 antd vue

使用 npm 或 yarn 安装 antd vue：

npm install ant-design-vue --save

或

yarn add ant-design-vue

引入 antd vue

全局引入所有组件：

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

const app = createApp(App)
app.use(Antd)
app.mount('#app')

按需引入组件以减少打包体积：

import { Button, message } from 'ant-design-vue'
import 'ant-design-vue/es/button/style/css'
import 'ant-design-vue/es/message/style/css'

使用 antd vue 组件

antd vue 实现

在模板中使用组件：

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

<script>
import { message } from 'ant-design-vue'

export default {
  methods: {
    showMessage() {
      message.success('This is a success message')
    }
  }
}
</script>

自定义主题

通过修改 less 变量来自定义主题样式。首先安装 less 和 less-loader：

npm install less less-loader --save-dev

在 vue.config.js 中配置：

antd vue 实现

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1DA57A',
            'link-color': '#1DA57A',
            'border-radius-base': '2px'
          },
          javascriptEnabled: true
        }
      }
    }
  }
}

国际化支持

antd vue 支持多语言，通过 LocaleProvider 设置：

<template>
  <a-config-provider :locale="zhCN">
    <a-date-picker />
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import moment from 'moment'
import 'moment/locale/zh-cn'

moment.locale('zh-cn')

export default {
  data() {
    return {
      zhCN
    }
  }
}
</script>

注意事项

确保项目中使用 Vue 3 时安装对应版本的 antd vue（v3.x），Vue 2 项目使用 v1.x 版本。

样式文件需要单独引入，可以选择 css 或 less 版本。按需引入时，每个组件的样式文件也需要单独引入。

对于 TypeScript 项目，antd vue 提供完整的类型定义，无需额外安装类型声明文件。