ant design vue组件库

### Ant Design Vue 组件库使用指南 #### 安装与配置 确保 Vue 项目环境中已安装 `ant-design-vue`。通过 npm 进行安装： ```bash npm install ant-design-vue --save ``` 引入整个 `Ant Design Vue` 或按需加载特定组件，如 Modal 组件[^1]。 对于全局注册所有组件的方式，在 main.js 文件中添加如下代码： ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 引入 ant-design-vue 并创建应用实例 import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css'; // 导入样式文件 const app = createApp(App); app.use(Antd); // 注册全部组件 app.mount('#app'); ``` 如果只需要局部使用某些组件，则可以在相应页面单独导入并注册这些组件，从而减少打包体积。例如只引入 Modal 对话框组件： ```javascript import { defineComponent, h } from 'vue'; import { Modal } from 'ant-design-vue'; export default defineComponent({ setup() { const info = () => { Modal.info({ title: 'This is a notification message', content: h('p', 'Some messages...'), }); }; return { info, }; }, }); ``` #### 使用示例 下面是一个简单的例子来展示如何在模板里调用 Modal 方法显示提示信息对话框[^3]: ```html <template> <a-button type="primary" @click="info"> Show Info Message </a-button> </template> <script lang="ts"> import { defineComponent } from "vue"; import { Modal } from "ant-design-vue"; export default defineComponent({ name: "InfoModalExample", methods: { info() { Modal.info({ title: "Information Title", content: "<div>Here's some information you need to know.</div>", onOk() {}, }); } } }) </script> ``` 此段代码展示了按钮点击事件触发后会弹出带有自定义标题和内容的信息模态框。