Vue3 表单创建教程：使用 @vue/formulate 简化开发

在 Vue3 中创建一个表单，可以按照以下步骤进行：

首先，在 Vue3 项目中安装 Vue3 和 Vue3 的表单工具包：

npm install vue@next
npm install @vue/formulate@next

在 Vue3 的组件中引入 Vue3 和 Vue3 的表单工具包：

import { defineComponent } from 'vue'
import { FormulateForm, FormulateInput } from '@vue/formulate'

在组件的 template 中使用 FormulateForm 和 FormulateInput 来创建表单：

<template>
<FormulateForm @submit="handleSubmit">
  <FormulateInput
    type="text"
    name="username"
    label="Username"
    validation="required"
  />
  <FormulateInput
    type="password"
    name="password"
    label="Password"
    validation="required|min:6"
  />
  <button type="submit">Submit</button>
</FormulateForm>
</template>

在组件的 methods 中定义 handleSubmit 方法，用于处理表单的提交：

methods: {
handleSubmit (formData) {
  console.log(formData)
}
}

这样，就创建了一个简单的表单，用户可以输入用户名和密码，然后点击提交按钮，把表单数据打印到控制台上。