Variant Form是一款高效的Vue低代碼表單生成器，它以其可視化設(shè)計(jì)和一鍵生成源碼的功能，為開(kāi)發(fā)者提供了極大的便利，讓開(kāi)發(fā)者能夠節(jié)省更多的時(shí)間專注于業(yè)務(wù)開(kāi)發(fā)。

核心功能

拖拽式可視化設(shè)計(jì)：Variant Form提供了拖拽式的可視化設(shè)計(jì)界面，用戶可以通過(guò)簡(jiǎn)單的拖拽操作來(lái)構(gòu)建表單，大大降低了開(kāi)發(fā)的復(fù)雜度。設(shè)計(jì)區(qū)域中，左側(cè)是組件庫(kù)，包含了各種表單組件，如輸入框、下拉框、單選框、多選框等，用戶只需將需要的組件拖拽到設(shè)計(jì)區(qū)域即可。

一鍵生成源碼：設(shè)計(jì)完成后，用戶只需點(diǎn)擊“生成源碼”按鈕，即可生成完整的表單源碼。生成的源碼包含了表單的HTML結(jié)構(gòu)和Vue組件代碼，用戶可以直接將其復(fù)制到自己的項(xiàng)目中使用。

高度自定義：Variant Form支持各種自定義配置，滿足不同場(chǎng)景下的表單需求。用戶可以自定義CSS樣式、校驗(yàn)邏輯、多語(yǔ)言支持等功能，確保表單的獨(dú)特性和功能性。

技術(shù)特點(diǎn)

基于Vue框架：Variant Form支持在Vue 2和Vue 3中使用，充分利用了Vue框架的響應(yīng)式系統(tǒng)和組件化開(kāi)發(fā)的優(yōu)勢(shì)。

現(xiàn)代化前端技術(shù)棧：使用了現(xiàn)代化的前端技術(shù)棧，界面美觀且響應(yīng)速度快，易于維護(hù)和擴(kuò)展，使用Vite作為構(gòu)建工具，JSON 定義表單結(jié)構(gòu)和規(guī)則驗(yàn)證。

開(kāi)源免費(fèi)：Variant Form是一個(gè)完全開(kāi)源的項(xiàng)目，代碼托管在Gitee等平臺(tái)上，任何人都可以免費(fèi)使用和修改。

哪些場(chǎng)景可使用？

企業(yè)內(nèi)部管理系統(tǒng)：適用于需要頻繁創(chuàng)建和修改表單的企業(yè)內(nèi)部管理系統(tǒng)，如HR系統(tǒng)、OA系統(tǒng)等。

電商后臺(tái)管理：用于快速構(gòu)建商品發(fā)布、訂單管理等表單，提升運(yùn)營(yíng)效率。

數(shù)據(jù)收集平臺(tái)：適用于需要收集用戶數(shù)據(jù)的各類平臺(tái)，如問(wèn)卷調(diào)查、用戶反饋等。

使用步驟

安裝Git：確保系統(tǒng)中已經(jīng)安裝了Git。

克隆項(xiàng)目代碼：通過(guò)Git命令克隆Variant Form的項(xiàng)目代碼到本地環(huán)境。

安裝依賴：進(jìn)入項(xiàng)目目錄并安裝所需的依賴項(xiàng)。直接執(zhí)行：

?npm install --registry=https://registry.npmmirror.com

啟動(dòng)開(kāi)發(fā)服務(wù)器：配置完成后，啟動(dòng)開(kāi)發(fā)服務(wù)器，并在瀏覽器中訪問(wèn)指定的URL，即可看到Variant Form的主界面。

設(shè)計(jì)表單：在設(shè)計(jì)區(qū)域中，通過(guò)拖拽組件來(lái)創(chuàng)建表單，并配置組件的屬性。

生成源碼：設(shè)計(jì)完成后，點(diǎn)擊“生成源碼”按鈕，即可生成完整的表單源碼。

打包命令：

#生產(chǎn)打包npm run build#表單設(shè)計(jì)器 + 表單渲染器打包npm run lib#表單渲染器打包npm run lib-render

在vue項(xiàng)目中集成

1. 安裝依賴

npm i vform-builds

import Vue from 'vue'import App from './App.vue'
import ElementUI from 'element-ui'  //引入element-ui庫(kù)import VForm from 'vform-builds'  //引入VForm庫(kù)
import 'element-ui/lib/theme-chalk/index.css'  //引入element-ui樣式import 'vform-builds/dist/VFormDesigner.css'  //引入VForm樣式
Vue.config.productionTip = falseVue.use(ElementUI)  //全局注冊(cè)element-uiVue.use(VForm)  //全局注冊(cè)VForm(同時(shí)注冊(cè)了v-form-designer和v-form-render組件)

new Vue({  render: h => h(App),}).$mount('#app')

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

<script>  export default {    data() {      return {      }    }  }</script>
<style lang="scss">body {  margin: 0;  /* 如果頁(yè)面出現(xiàn)垂直滾動(dòng)條，則加入此行CSS以消除之 */}</style>

界面預(yù)覽

首頁(yè)面

導(dǎo)出代碼

生成組件源代碼

附錄

源碼：

https://gitee.com/vdpadmin/variant-form

文檔：

https://www.vform666.com/

在線演示：

http://120.92.142.115/

——The  End—