ant design vue 示例

Ant Design Vue 是一个基于 Vue.js 的 UI 组件库，它提供了一系列高质量、可复用的 UI 组件，可以帮助开发者快速构建出美观、易用的应用程序界面。

下面是一个简单的 Ant Design Vue 示例：

<template>
  <div>
    <a-button type="primary" @click="handleClick">Click Me</a-button>
    <a-modal :visible="visible" title="Hello, Ant Design Vue!" @cancel="handleCancel">
      <p>欢迎使用 Ant Design Vue。</p>
    </a-modal>
  </div>
</template>

<script>
import { Button, Modal } from 'ant-design-vue';

export default {
  components: {
    'a-button': Button,
    'a-modal': Modal,
  },
  data() {
    return {
      visible: false,
    };
  },
  methods: {
    handleClick() {
      this.visible = true;
    },
    handleCancel() {
      this.visible = false;
    },
  },
};
</script>

在这个示例中，我们使用了 Ant Design Vue 的 Button 和 Modal 组件。当用户点击按钮时，会弹出一个模态框，显示欢迎信息。注意：我们使用了 Ant Design Vue 的简写，将组件名前缀从 `antd` 改为 `a`。

以上是一个非常简单的 Ant Design Vue 示例，你可以在自己的项目中试试这些组件，体验一下 Ant Design Vue 带来的便捷和美观。