开源项目低代码表单FormCreate从Vue2到Vue3升级指南

开源项目低代码表单 FormCreate v3 版本基于 Vue 3.0 构建，尽管功能与 v2 版本大致相同，但有一些重要的变更和不兼容项需要注意。

源码地址: Github | Gitee

FormCreate v3 对比 v2 版本在一些功能和配置项上做了调整，以更好地支持 Vue 3 的新特性。以下是 v2 到 v3 升级过程中需要关注的变化和调整。

移除配置项

在 v3 版本中，以下配置项已被移除，因为它们在 Vue 3 中不再适用：

• attrs： 在 Vue 3 中不再需要单独配置 attrs，可以直接在 props 中处理。
• scopedSlots： 已被 slots 替代，Vue 3 使用 slot 统一管理插槽。
• domProps： 不再单独使用 domProps，可以直接在 props 中处理。
• hook： Vue 3 中生命周期钩子已重命名且使用方式不同。
• nativeOn： 不再需要 nativeOn，可以直接在 on 中处理原生事件。
• nativeEmit： 原生事件与 Vue 事件已统一，不再需要区分，可以直接在 emit 中处理。

功能调整

为了更好地支持 Vue 3 和现代 JavaScript 语法，FormCreate v3 版本对部分功能进行了调整：

• 修改 validate、validateField、submit 返回值：

这些方法现在返回 Promise，您可以使用 then 和 catch 来处理异步操作结果。

fApi.validate().then(() => {// 表单验证通过
}).catch(e=>{// 表单验证失败
});

• 修改 v-model 为 v-model:api： 在 Vue 3 中，v-model 支持多个参数，因此 v-model:api 用于绑定 FormCreate 实例。

<form-create v-model:api="fApi" :rule="rule" />

• 修改 value.sync 为 v-model： Vue 3 中不再使用 sync 修饰符，直接使用 v-model 进行双向绑定。

<form-create v-model="formData" :rule="rule" />

不兼容项

在升级到 v3 时，以下功能和特性将不再兼容：

• 不支持 iview： v3 版本不再支持 iview（View UI），建议迁移到其他支持的 UI 框架，如 Element Plus、Ant Design Vue 等。

• 移除 template 生成组件方式： template 方式在 v3 中已被移除，建议使用 JSX 或函数式组件来生成动态组件。

• 移除 formCreate.init 方法： v3 版本中 formCreate.init 方法已被移除，所有的初始化操作建议使用 Vue 组件的生命周期钩子进行管理。

安装

FormCreate 支持多个主流 UI 框架，您可以根据自己项目的需求选择对应的版本进行安装。

Vant UI 版本 移动端

npm i @form-create/vant^3

Element Plus 版本

npm i @form-create/element-ui@^3

Ant Design Vue 版本

npm i @form-create/ant-design-vue@^3

Naive UI 版本

npm i @form-create/naive-ui@^3

Arco Design 版本

npm i @form-create/arco-design@^3

TDesign 版本

npm i @form-create/tdesign@^3