ant design vue实现

安装 Ant Design Vue

通过 npm 或 yarn 安装 Ant Design Vue 及其依赖。确保项目基于 Vue 3（Ant Design Vue 3.x 仅支持 Vue 3）。

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

全局引入组件

在项目的入口文件（如 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');

按需引入组件

若需优化体积，可通过 unplugin-vue-components 插件自动按需加载组件（需配置构建工具如 Vite 或 Webpack）：

1. 安装插件：

   npm install unplugin-vue-components -D

2. 在 vite.config.js 中配置：

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

export default { plugins: [ Components({ resolvers: [AntDesignVueResolver()], }), ], };

### 使用组件  
在 Vue 单文件组件中直接使用 Ant Design Vue 的组件，例如按钮和表格：  

```vue
<template>
  <a-button type="primary">点击</a-button>
  <a-table :columns="columns" :data-source="data" />
</template>

<script>
import { ref } from 'vue';
export default {
  setup() {
    const columns = [
      { title: '姓名', dataIndex: 'name' },
      { title: '年龄', dataIndex: 'age' },
    ];
    const data = ref([
      { name: '张三', age: 20 },
      { name: '李四', age: 22 },
    ]);
    return { columns, data };
  },
};
</script>

定制主题

通过修改 less 变量覆盖默认主题样式。在 Vite 项目中配置 vite.config.js：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1890ff', // 主色
          'border-radius-base': '4px', // 圆角
        },
        javascriptEnabled: true,
      },
    },
  },
});

国际化支持

通过 ConfigProvider 组件设置全局语言：

<template>
  <a-config-provider :locale="zhCN">
    <a-button>中文按钮</a-button>
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import { defineComponent } from 'vue';
export default defineComponent({
  setup() {
    return { zhCN };
  },
});
</script>

表单验证

结合 a-form 和 v-model 实现表单验证：

<template>
  <a-form :model="form" :rules="rules" @finish="onSubmit">
    <a-form-item label="用户名" name="username">
      <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>
import { reactive } from 'vue';
export default {
  setup() {
    const form = reactive({ username: '' });
    const rules = {
      username: [{ required: true, message: '请输入用户名' }],
    };
    const onSubmit = () => {
      console.log('表单数据:', form);
    };
    return { form, rules, onSubmit };
  },
};
</script>