ant design vue 的使用示例

Ant Design Vue 是一套基于 Vue.js 的 UI 组件库，提供了丰富的组件和模板，能够快速搭建美观、易用的 Web 应用程序。以下是一个示例，演示如何使用 Ant Design Vue 来创建一个简单的表单页面：

1. 安装 Ant Design Vue

通过 npm 安装 Ant Design Vue：

npm install ant-design-vue --save

2. 引入和使用组件

在 Vue.js 中引入 Ant Design Vue 组件：

<template>
  <div>
    <a-input v-model="name" placeholder="请输入姓名"></a-input>
    <a-input v-model="email" placeholder="请输入邮箱"></a-input>
    <a-input v-model="phone" placeholder="请输入手机号"></a-input>
    <a-button type="primary" @click="submitForm">提交</a-button>
  </div>
</template>

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

  export default {
    components: {
      'a-input': Input,
      'a-button': Button
    },
    data() {
      return {
        name: '',
        email: '',
        phone: ''
      }
    },
    methods: {
      submitForm() {
        console.log('提交表单', this.name, this.email, this.phone);
      }
    }
  }
</script>

在上面的示例中，我们引入了三个 `Input` 组件和一个 `Button` 组件，并将它们注册为 `a-input` 和 `a-button` 组件。然后在模板中使用这些组件来创建一个包含三个输入框和一个提交按钮的表单。当用户点击提交按钮时，`submitForm` 方法会被调用，将用户输入的数据打印到控制台上。

3. 运行应用

在运行应用之前，需要在 Vue.js 中引入 Ant Design Vue 的样式文件。在入口 JS 文件中添加以下代码：

import 'ant-design-vue/dist/antd.css';

现在可以运行应用了：

npm run serve

以上是一个简单的 Ant Design Vue 示例，它演示了如何创建一个表单页面。你可以根据自己的需求和想象力来使用这个组件库来创建更多复杂的页面。