Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，为开发者提供了一套高质量的组件，用于构建企业级中后台产品。
网址：https://antdv.com/components/overview-cn
安装库等依赖
npm i ant-design-vue@4.x unplugin-vue-components @ant-design/icons-vue -D
unplugin-vue-components：在vite中使用unplugin-vue-components来进行按需加载，但此插件无法处理非组件模块，如message和notification这种组件需要手动加载。
@ant-design/icons-vue：ant-design-vue 的图标库。
安装的版本
配置按需自动加载 Ant Design vue 组件/vite.config.js
// ...
import Components from 'unplugin-vue-components/vite'
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
AntDesignVueResolver({
importStyle: false, // css in js
}),
],
}),
// ...
配置 message 和 notification 的加载
在 nessage 和 notification 比较特殊，需要手动添加。添加文件：
/src/components/antd_ui.js
import { message, notification } from 'ant-design-vue'
import * as Icons from '@ant-design/icons-vue'
// 简单的对notification包装一下
const notify = (message, description, type, placement = 'topRight') => {
notification[type]({
message,
description,
placement,
duration: 5,
})
}
export const antd = app => {
app.config.globalProperties.$message = message
app.config.globalProperties.$notify = notify
Object.keys(Icons).forEach(key => {
if (key === 'default') return
app.component(key, Icons[key])
})
}
在 /src/main.js 中添加
// ...
import { antd } from './components/antd_ui'
const app = createApp(App)
app.config.globalProperties.$http = req // axios
app.use(store) // vuex
antd(app) // antd message & notification
install(app) // 批量引入全局组件
app.use(router) // 引用路由
app.mount('#app')添加组件页面进行测试
/src/view/test/antd.vue
<script setup>
import { getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
const fnMsg = () => {
proxy.$message.info('message')
}
const fnNotify = (message, description, type, placement) => {
proxy.$notify(message, description, type, placement)
}
</script>
<template>
<h3>Ant Design Vue</h3>
<div>
<a-button type="primary" @click="fnMsg">antd Message</a-button>
<a-button
type="primary"
@click="fnNotify('Notification', '这是一个全局通知', 'error', 'topRight')"
>
<template #icon>
<DownloadOutlined />
</template>
antd Notification
</a-button>
</div>
</template>
<style>
nav button {
margin: 0 10px;
}
</style>
添加到路由
/src/router/test.js
// ...
const pAntd = () => import('@v/test/antd.vue')
const testRoutes = [
{
path: '/antd',
name: 'antd',
meta: {
title: 'Ant Design Vue',
},
component: pAntd,
},
// ...
]
在页面加链接按钮
/src/App.vue
<template>
<main>
<nav class="nav">
<router-link to="/antd" active-class="on">Ant Design Vue</router-link>
// ...
启动 npm run dev 测试
----- End ----
