一、关于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等组件