[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8822":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":16,"stars30d":17,"stars90d":16,"forks30d":16,"starsTrendScore":16,"compositeScore":18,"rankGlobal":10,"rankLanguage":10,"license":19,"archived":20,"fork":20,"defaultBranch":21,"hasWiki":22,"hasPages":20,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},8822,"variant-form","vform666\u002Fvariant-form","vform666","A powerful form designer for Vue.","http:\u002F\u002Fwww.vform666.com",null,"Vue",1996,326,18,21,0,3,20.54,"Other",false,"master",true,[24,25,26,27,28,29,30],"designer","element-ui","form","iview","online-forms","vue","vuejs2","2026-06-12 02:01:58","# Variant Form\n#### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。\n\n![image](https:\u002F\u002Fks3-cn-beijing.ksyuncs.com\u002Fvform-static\u002Fimg\u002Fvform_demo.gif)\n\n\u003Cbr\u002F>\n\n### 立即体验\n[在线Demo](http:\u002F\u002F120.92.142.115\u002F)\n\n\n### 🎉🎉\u003Cmark>基于VForm的全栈低代码平台已发布\u003C\u002Fmark>🎉🎉\n![meta_low_code](https:\u002F\u002Fvform666.com\u002Fmele.png)\n\u003Cbr\u002F>\n[美乐低代码——立即进入](https:\u002F\u002Fmelecode.com\u002F) （私有部署、开箱即用️，已开源✌✌）️\n\n\n### 立即体验VForm Pro高级版（提供商业支持）\n[Pro Demo](https:\u002F\u002Fwww.vform666.com\u002Fpro\u002F)\n\n### 视频教程集合：\n[B站观看](https:\u002F\u002Fspace.bilibili.com\u002F626932375)\n\n### Vue 3正式版已发布\n[立即进入](https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form3-vite)\n\n### 🎉🎉基于Vant组件库的Mobile版本已发布🎉🎉\n[立即进入](https:\u002F\u002Fvform666.com\u002Fvform-mobile.html)\n\n\n### 友情链接\n\n[Fantastic-admin](https:\u002F\u002Fhooray.gitee.io\u002Ffantastic-admin\u002F) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2\u002FVue3）\n\n\n\u003Cbr\u002F>\n\n### 功能一览\n```\n> 拖拽式可视化表单设计；\n> 支持PC、Pad、H5三种布局；\n> 支持运行时动态加载表单；\n> 支持表单复杂交互控制；\n> 支持自定义CSS样式；\n> 支持自定义校验逻辑；\n> 支持国际化多语言；\n> 兼容IE 11浏览器；\n> 可导出Vue组件、HTML源码；\n> 可导出Vue的SFC单文件组件；\n> 支持开发自定义组件；\n> 支持响应式自适应布局；\n> 支持VS Code插件；\n> 更多功能等你探究...；\n```\n\n### 安装依赖\n```\nnpm install --registry=https:\u002F\u002Fregistry.npmmirror.com\n```\n\n### 开发调试\n```\nnpm run serve\n```\n\n### 生产打包\n```\nnpm run build\n```\n\n### 表单设计器 + 表单渲染器打包\n```\nnpm run lib\n```\n\n### 表单渲染器打包\n```\nnpm run lib-render\n```\n\n### 浏览器兼容性\n```Chrome（及同内核的浏览器如QQ浏览器、360浏览器等等），Edge, Firefox，Safari，IE 11```\n\n\u003Cbr\u002F>\n\n### 跟Vue项目集成\n\n\u003Cbr\u002F>\n\n#### 1. 安装包\n  ```bash\n  npm i vform-builds\n  ```\n或\n  ```bash\n  yarn add vform-builds\n  ```\n\n\u003Cbr\u002F>\n\n#### 2. 引入并全局注册VForm组件\n```javascript\nimport Vue from 'vue'\nimport App from '.\u002FApp.vue'\n\nimport ElementUI from 'element-ui'  \u002F\u002F引入element-ui库\nimport VForm from 'vform-builds'  \u002F\u002F引入VForm库\n\nimport 'element-ui\u002Flib\u002Ftheme-chalk\u002Findex.css'  \u002F\u002F引入element-ui样式\nimport 'vform-builds\u002Fdist\u002FVFormDesigner.css'  \u002F\u002F引入VForm样式\n\nVue.config.productionTip = false\n\nVue.use(ElementUI)  \u002F\u002F全局注册element-ui\nVue.use(VForm)  \u002F\u002F全局注册VForm(同时注册了v-form-designer和v-form-render组件)\n\nnew Vue({\n  render: h => h(App),\n}).$mount('#app')\n```\n\n\u003Cbr\u002F>\n\n#### 3. 在Vue模板中使用表单设计器组件\n```html\n\u003Ctemplate>\n  \u003Cv-form-designer>\u003C\u002Fv-form-designer>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\n  export default {\n    data() {\n      return {\n      }\n    }\n  }\n\u003C\u002Fscript>\n\n\u003Cstyle lang=\"scss\">\nbody {\n  margin: 0;  \u002F* 如果页面出现垂直滚动条，则加入此行CSS以消除之 *\u002F\n}\n\u003C\u002Fstyle>\n```\n\n\u003Cbr\u002F>\n\n#### 4. 在Vue模板中使用表单渲染器组件\n```html\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cv-form-render :form-json=\"formJson\" :form-data=\"formData\" :option-data=\"optionData\" ref=\"vFormRef\">\n    \u003C\u002Fv-form-render>\n    \u003Cel-button type=\"primary\" @click=\"submitForm\">Submit\u003C\u002Fel-button>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\u003Cscript>\n  export default {\n    data() {\n      return {\n        formJson: {\"widgetList\":[],\"formConfig\":{\"labelWidth\":80,\"labelPosition\":\"left\",\"size\":\"\",\"labelAlign\":\"label-left-align\",\"cssCode\":\"\",\"customClass\":\"\",\"functions\":\"\",\"layoutType\":\"PC\",\"onFormCreated\":\"\",\"onFormMounted\":\"\",\"onFormDataChange\":\"\"}},\n        formData: {},\n        optionData: {}\n      }\n    },\n    methods: {\n      submitForm() {\n        this.$refs.vFormRef.getFormData().then(formData => {\n          \u002F\u002F Form Validation OK\n          alert( JSON.stringify(formData) )\n        }).catch(error => {\n          \u002F\u002F Form Validation failed\n          this.$message.error(error)\n        })\n      }\n    }\n  }\n\u003C\u002Fscript>\n```\n\n\u003Cbr\u002F>\n\n### 资源链接\n\u003Chr>\n\n文档官网：\u003Ca href=\"https:\u002F\u002Fwww.vform666.com\u002F\" target=\"_blank\">https:\u002F\u002Fwww.vform666.com\u002F\u003C\u002Fa>\n\n在线演示：\u003Ca href=\"http:\u002F\u002F120.92.142.115\u002F\" target=\"_blank\">http:\u002F\u002F120.92.142.115\u002F\u003C\u002Fa>\n\nGitee仓库：\u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form\" target=\"_blank\">https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form\u003C\u002Fa>\n\nGithub仓库：\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvform666\u002Fvariant-form\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002Fvform666\u002Fvariant-form\u003C\u002Fa>\n\nVS Code插件：\u003Ca href=\"https:\u002F\u002Fwww.vform666.com\u002Fplugin\u002F\" target=\"_blank\">https:\u002F\u002Fwww.vform666.com\u002Fplugin\u002F\u003C\u002Fa>\n\n更新日志：\u003Ca href=\"https:\u002F\u002Fwww.vform666.com\u002Fchangelog.html\" target=\"_blank\">https:\u002F\u002Fwww.vform666.com\u002Fchangelog.html\u003C\u002Fa>\n\n订阅Pro版：\u003Ca href=\"https:\u002F\u002Fwww.vform666.com\u002Fpro\u002F\" target=\"_blank\">https:\u002F\u002Fwww.vform666.com\u002Fpro\u002F\u003C\u002Fa>\n\n技术交流群：扫如下二维码加群\n\n![image](https:\u002F\u002Fvform2022.ks3-cn-beijing.ksyuncs.com\u002Fvchat_qrcode.png)\n","Variant Form 是一款基于 Vue 的强大表单设计器，支持拖拽式可视化设计并能一键生成源码。其核心功能包括支持PC、Pad和H5三种布局，动态加载表单，自定义CSS样式与校验逻辑，国际化多语言支持等，并且兼容IE 11浏览器。此外，它还提供了导出Vue组件、HTML源码及SFC单文件组件的能力，以及开发自定义组件的支持。适合于需要快速构建复杂交互表单的应用场景，如企业级管理系统中的数据录入界面或在线调查问卷等。",2,"2026-06-11 03:19:54","top_language"]