ant design vue 实现

安装 Ant Design Vue

确保项目基于 Vue 3 或 Vue 2（需使用兼容版本）。通过 npm 或 yarn 安装 Ant Design Vue：

npm install ant-design-vue@next
# 或
yarn add ant-design-vue@next

全局引入组件

在 Vue 项目的入口文件（如 main.js 或 main.ts）中全局引入 Ant Design Vue：

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

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

按需引入组件

若需优化打包体积，可通过 babel-plugin-import 实现按需加载。安装插件：

npm install babel-plugin-import --save-dev

在 babel.config.js 中配置：

module.exports = {
  plugins: [
    [
      'import',
      {
        libraryName: 'ant-design-vue',
        libraryDirectory: 'es',
        style: 'css',
      },
    ],
  ],
};

之后在组件中单独引入：

import { Button, message } from 'ant-design-vue';

使用组件

在 Vue 单文件组件中直接使用 Ant Design Vue 的组件：

<template>
  <a-button type="primary" @click="showMessage">点击我</a-button>
</template>

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

const showMessage = () => {
  message.success('操作成功');
};
</script>

主题定制

通过修改 less 变量覆盖默认主题。安装 less 和 less-loader：

npm install less less-loader --save-dev

在 vue.config.js 中配置：

module.exports = {
  css: {
    loaderOptions: {
      less: {
        lessOptions: {
          modifyVars: {
            'primary-color': '#1890ff',
          },
          javascriptEnabled: true,
        },
      },
    },
  },
};

国际化支持

引入 LocaleProvider 设置语言：

import { ConfigProvider } from 'ant-design-vue';
import zhCN from 'ant-design-vue/es/locale/zh_CN';

<template>
  <ConfigProvider :locale="zhCN">
    <App />
  </ConfigProvider>
</template>

表单验证

结合 Vue 的响应式数据实现表单验证：

<template>
  <a-form :model="form" @submit="handleSubmit">
    <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">提交</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  username: '',
});

const handleSubmit = () => {
  console.log(form.value);
};
</script>