vue3中使用ant design vue表单

要在Vue3中使用Ant Design Vue表单，你需要先安装Ant Design Vue和Vue3中的Composition API。可以按照以下步骤进行操作：

1. 安装Ant Design Vue

npm install ant-design-vue --save

2. 安装Vue3中的Composition API

npm install @vue/composition-api --save

3. 在main.js中引入Ant Design Vue和Composition API，并使用Vue.use()将Ant Design Vue注册为全局组件

import Vue from 'vue'
import { Button, Form, Input } from 'ant-design-vue'
import { createApp } from 'vue'
import { reactive } from '@vue/composition-api'

Vue.use(Button)
Vue.use(Form)
Vue.use(Input)

const app = createApp({
  setup() {
    const form = reactive({
      username: '',
      password: ''
    })
    const submit = () => {
      console.log(form)
    }
    return { form, submit }
  }
})

4. 在template中使用Ant Design Vue表单组件

<template>
  <a-form :form="form" @submit="submit">
    <a-form-item label="Username">
      <a-input v-model="form.username" />
    </a-form-item>
    <a-form-item label="Password">
      <a-input v-model="form.password" type="password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

这样就可以在Vue3中使用Ant Design Vue表单了。