Vite+Vue3+TS(6)整合AntDesignVue

AntDesignVue 提供了开箱即用的高质量 Vue 组件

AntDesignVue 官方文档：https://www.antdv.com/components/layout-cn

---

安装

使用 yarn 进行安装

yarn add ant-design-vue

整合

在 main.ts 文件中进行注册（第一次使用，直接使用全局注册，后续需要性能优化再考虑使用按需加载）

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

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

示例

在原来的 Home.vue 文件中使用 Ant 组件

<template>
    <a-button type="primary">Primary Buttona-button>
    <a-button>Default Buttona-button>
    <a-button type="dashed">Dashed Buttona-button>
    <a-button type="text">Text Buttona-button>
    <a-button type="link">Link Buttona-button>
template>

页面展示效果如下，按钮已经使用了 Ant 的样式