Vue3中使用Vform3（自定义表单工具）

一、关于Vform的简单介绍和使用

1.介绍

VForm是一款基于Vue 2/Vue 3的低代码表单，支持Element UI、iView两种UI库，定位为前端开发人员提供快速搭建表单、实现表单交互和数据收集的功能。

VForm全称为Variant Form，寓意为灵活的、动态的、多样化的Vue低代码表单。

VForm由表单设计器VFormDesigner和表单渲染器VFormRender两部分构成，VFormDesigner通过拖拽组件方式生成JSON格式的表单对象，VFormRender负责将表单JSON渲染为Vue组件。

以下是它的应用场景：

1.前端代码自动生成；
2.工作流表单设计；
3.业务管理后台表单编辑；
4.通用CRUD新建/编辑表单；
5.数据采集（报名表、申请表、健康日报等等）；
6.问卷调查；
7.低代码开发平台；
8.动态表单定制；
9.移动表单设计；

2.安装
可以用CDN和Node的形式去引入到项目中，这里只说明Node的形式。以下安装的是包括设计器和解析器的整个集合模块,需要分开的去文档查阅详细地文档。(文档在文中最后)

// 用Npm或者Yarn
npm i vform3-builds 
yarn add vform3-builds

//另外需要下载依赖Element-plus,Vue3用plus
npm i element-plus
yarn add element-plus

3.使用
引入并全局注册VForm组件
修改vue项目的main.js，如下所示（包含注释的6行代码）：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'  //如果需要axios，请引入

import ElementPlus from 'element-plus'  //引入element-plus库
import VForm3 from 'vform3-builds'  //引入VForm3库

import 'element-plus/dist/index.css'  //引入element-plus样式
import 'vform3-builds/dist/designer.style.css'  //引入VForm3样式

const app = createApp(App)
app.use(ElementPlus)  //全局注册element-plus
app.use(VForm3)  //全局注册VForm3(同时注册了v-form-designe、v-form-render等组件)
/* 注意：如果你的项目中有使用axios，请用下面一行代码将全局axios复位为你的axios！！ */
window.axios = axios
app.mount('#app')

在Vue模板中使用组件

<template>
  <v-form-designer></v-form-designer>
</template>

<script setup>
</script>

<style lang="scss">
body {
  margin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */
}
</style>

二、二次开发的流程

二次开发文档需加群查阅,这里只讲解流程

1.下载源码

GitHub仓库：https://gitee.com/vdpadmin/variant-form3-vite
Gitee同步仓库：https://github.com/vform666/variant-form3-vite

2.开发阶段(加群可查阅文档)

3.导入我们的项目

npm run lib

以上命令生成我们所需的两个文件,Vform3版本只需要两个,分别是designer.umd.js和style.css(引入项目中需要改名为designer.style.css)

第一步:
拿到文件可在项目根目录下新建lib文件夹,在lib中新建vform3文件夹,将lib好的两个文件放进去/lib/vform

第二步:
假设lib在根目录,然后我们只需要在main文件中,最后用法与我们直接用npm导入一致.

import VForm3 from '@/../lib/vform/designer.umd.js'
import '../lib/vform/designer.style.css'
app.use(VForm3)  //全局注册VForm3，同时注册了v-form-designer、v-form-render等组件

三、结束

附上vform3的文档: vform3
很多问题都可以在文档中找到答案,包括以上我的一些介绍,有问题和建议需要跟我交流的可以留下回复.