antd vue实现
以下是基于 Ant Design Vue（AntDV）实现常见功能的示例和说明：
安装与基础配置
确保项目已安装 Vue 3 和 Ant Design Vue 4.x（对应 Vue 3）。通过以下命令安装：
npm install ant-design-vue@next在 main.js 或 main.ts 中全局引入：
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');常用组件示例
表单与输入控件
<template>
<a-form :model="formState" @finish="handleSubmit">
<a-form-item label="用户名" name="username">
<a-input v-model:value="formState.username" />
</a-form-item>
<a-form-item label="密码" name="password">
<a-input-password v-model:value="formState.password" />
</a-form-item>
<a-form-item>
<a-button type="primary" html-type="submit">提交</a-button>
</a-form-item>
</a-form>
</template>
<script setup>
import { reactive } from 'vue';
const formState = reactive({
username: '',
password: ''
});
const handleSubmit = () => {
console.log(formState);
};
</script>表格与分页
<template>
<a-table
:columns="columns"
:data-source="data"
:pagination="{ pageSize: 5 }"
/>
</template>
<script setup>
const columns = [
{ title: '姓名', dataIndex: 'name', key: 'name' },
{ title: '年龄', dataIndex: 'age', key: 'age' }
];
const data = [
{ key: '1', name: '张三', age: 32 },
{ key: '2', name: '李四', age: 28 }
];
</script>主题定制
在 vite.config.js 中通过 less 修改主题变量：
import { defineConfig } from 'vite';
export default defineConfig({
css: {
preprocessorOptions: {
less: {
modifyVars: {
'primary-color': '#1890ff',
'border-radius-base': '4px'
},
javascriptEnabled: true
}
}
}
});按需加载
使用 unplugin-vue-components 自动导入组件（以 Vite 为例）：
// vite.config.js
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
plugins: [
Components({
resolvers: [AntDesignVueResolver()]
})
]
});注意事项
- 图标需要单独引入：
import { UserOutlined } from '@ant-design/icons-vue'; - 表单验证推荐配合
async-validator使用 - 兼容性需注意 Vue 3 版本要求（AntDV 4.x 仅支持 Vue 3）
