当前位置：首页 > VUE

antd vue 实现

2026-03-07 00:16:22VUE

antd vue 实现

antd vue 是 Ant Design 的 Vue 实现版本，提供了一套高质量的 Vue 组件库，适用于企业级中后台产品开发。以下是实现 antd vue 的基本步骤和注意事项。

安装 antd vue

使用 npm 或 yarn 安装 ant-design-vue 包：

npm install ant-design-vue --save

或

yarn add ant-design-vue

引入 antd vue

在项目中引入 antd vue 的方式有多种，可以根据需求选择全局引入或按需引入。

全局引入

在项目的入口文件（如 main.js 或 main.ts）中全局引入 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');

按需引入

按需引入可以减少打包体积，仅引入需要的组件。以 Button 组件为例：

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

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

使用组件

在 Vue 单文件组件中直接使用 antd vue 的组件。例如，使用 Button 组件：

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

<script>
export default {
  name: 'MyComponent',
};
</script>

主题定制

antd vue 支持通过修改 less 变量来定制主题。首先安装 less 和 less-loader：

npm install less less-loader --save-dev

在项目的 vue.config.js 中配置 less：

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

国际化支持

antd vue 提供国际化支持，可以切换组件的语言。例如，设置为中文：

import { createApp } from 'vue';
import Antd from 'ant-design-vue';
import App from './App.vue';
import 'ant-design-vue/dist/antd.css';
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { ConfigProvider } from 'ant-design-vue';

const app = createApp(App);
app.use(Antd);
app.use(ConfigProvider, { locale: zhCN });
app.mount('#app');