ant design vue实现

ant design vue 实现

安装依赖

使用 npm 或 yarn 安装 ant-design-vue 及其依赖：

npm install ant-design-vue @ant-design/icons-vue
# 或
yarn add ant-design-vue @ant-design/icons-vue

全局引入组件

在 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).mount('#app');

按需引入组件

若需优化打包体积，可通过 unplugin-vue-components 插件实现按需加载：

1. 安装插件：

   npm install unplugin-vue-components -D

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

   
   // Vite 示例
   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">Primary Button</a-button>
  <a-date-picker @change="onChange" />
</template>

<script>
export default {
  methods: {
    onChange(date, dateString) {
      console.log(date, dateString);
    },
  },
};
</script>

自定义主题

通过修改 Less 变量覆盖默认样式：

1. 安装 Less 依赖：

   npm install less less-loader -D

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

   export default {
   css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          'primary-color': '#1890ff',
        },
        javascriptEnabled: true,
      },
    },
   },
   };

国际化支持

配置 LocaleProvider 实现多语言切换：

<template>
  <a-config-provider :locale="zhCN">
    <a-pagination :total="50" show-size-changer />
  </a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale/zh_CN';
import enUS from 'ant-design-vue/es/locale/en_US';

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

表单验证

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

<template>
  <a-form :model="form" :rules="rules" @finish="onSubmit">
    <a-form-item label="Username" name="username">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
export default {
  data() {
    return {
      form: { username: '' },
      rules: {
        username: [{ required: true, message: 'Please input username' }],
      },
    };
  },
  methods: {
    onSubmit(values) {
      console.log('Received values:', values);
    },
  },
};
</script>