[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8877":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":8,"htmlUrl":8,"language":9,"languages":8,"totalLinesOfCode":8,"stars":10,"forks":11,"watchers":12,"openIssues":13,"contributorsCount":14,"subscribersCount":14,"size":14,"stars1d":14,"stars7d":14,"stars30d":15,"stars90d":14,"forks30d":14,"starsTrendScore":14,"compositeScore":16,"rankGlobal":8,"rankLanguage":8,"license":17,"archived":18,"fork":18,"defaultBranch":19,"hasWiki":20,"hasPages":18,"topics":21,"createdAt":8,"pushedAt":8,"updatedAt":22,"readmeContent":23,"aiSummary":24,"trendingCount":14,"starSnapshotCount":14,"syncStatus":25,"lastSyncTime":26,"discoverSource":27},8877,"variant-form3-vite","vform666\u002Fvariant-form3-vite","vform666",null,"Vue",1637,312,12,22,0,1,52.59,"Other",false,"master",true,[],"2026-06-12 04:00:41","# Variant Form 3 For Vue 3.x\n#### 一款高效的Vue 3低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。\n\n![image](https:\u002F\u002Fks3-cn-beijing.ksyuncs.com\u002Fvform-static\u002Fimg\u002Fvform_demo.gif)\n\n\u003Cbr\u002F>\n\n### 立即体验VForm 3\n[在线Demo](http:\u002F\u002F120.92.142.115:81\u002Fvform3\u002F)\n\n### 🎉🎉\u003Cmark>基于VForm3的全栈低代码平台已发布\u003C\u002Fmark>🎉🎉\n![meta_low_code](https:\u002F\u002Fvform666.com\u002Fmele.png)\n\u003Cbr\u002F>\n[美乐低代码——立即进入](https:\u002F\u002Fmelecode.com\u002F) （私有部署、开箱即用️，已开源✌✌）️\n\n### 立即体验VForm 3 Pro高级版（提供商业支持）\n[VForm 3 Pro Demo](https:\u002F\u002Fwww.vform666.com\u002Fpro\u002F)\n\n### 视频教程集合：\n[B站观看](https:\u002F\u002Fspace.bilibili.com\u002F626932375)\n \n### 适合Vue 2的版本看这里\n[点此查看](https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form)\n \n### 友情链接\n\n[Fantastic-admin](https:\u002F\u002Fhooray.gitee.io\u002Ffantastic-admin\u002F) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2\u002FVue3）\n\n### 功能一览\n```\n> 拖拽式可视化表单设计；\n> 支持PC、Pad、H5三种布局；\n> 支持运行时动态加载表单；\n> 支持表单复杂交互控制；\n> 支持自定义CSS样式；\n> 支持自定义校验逻辑；\n> 支持国际化多语言；\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浏览器等等），Firefox，Safari```\n\n\u003Cbr\u002F>\n\n### 跟Vue 3.x项目集成\n\n\u003Cbr\u002F>\n\n#### 1. 安装包\n```bash\nnpm i vform3-builds\n```\n或\n```bash\nyarn add vform3-builds\n```\n\n\u003Cbr\u002F>\n\n#### 2. 引入并全局注册VForm 3组件\n```\nimport { createApp } from 'vue'\nimport App from '.\u002FApp.vue'\n\nimport ElementPlus from 'element-plus'  \u002F\u002F引入element-plus库\nimport 'element-plus\u002Fdist\u002Findex.css'  \u002F\u002F引入element-plus样式\n\nimport VForm3 from 'vform3-builds'  \u002F\u002F引入VForm 3库\nimport 'vform3-builds\u002Fdist\u002Fdesigner.style.css'  \u002F\u002F引入VForm3样式\n\nconst app = createApp(App)\napp.use(ElementPlus)  \u002F\u002F全局注册element-plus\napp.use(VForm3)  \u002F\u002F全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)\n\napp.mount('#app')\n```\n\n\u003Cbr\u002F>\n\n#### 3. 在Vue 3.x模板中使用表单设计器组件\n```bash\n\u003Ctemplate>\n\u003Cv-form-designer ref=\"vfdRef\">\u003C\u002Fv-form-designer>\n\u003C\u002Ftemplate>\n\n\u003Cscript setup>\nconst vfdRef = ref(null)\n\u003C\u002Fscript>\n\n\u003Cstyle lang=\"scss\">\nbody {\nmargin: 0;  \u002F* 如果页面出现垂直滚动条，则加入此行CSS以消除之 *\u002F\n}\n\u003C\u002Fstyle>\n```\n\n\u003Cbr\u002F>\n\n#### 4. 在Vue 3.x模板中使用表单渲染器组件\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 setup>\nimport { ref, reactive } from 'vue'\nimport { ElMessage } from 'element-plus'\n\nconst formJson = reactive({\"widgetList\":[],\"formConfig\":{\"modelName\":\"formData\",\"refName\":\"vForm\",\"rulesName\":\"rules\",\"labelWidth\":80,\"labelPosition\":\"left\",\"size\":\"\",\"labelAlign\":\"label-left-align\",\"cssCode\":\"\",\"customClass\":\"\",\"functions\":\"\",\"layoutType\":\"PC\",\"jsonVersion\":3,\"onFormCreated\":\"\",\"onFormMounted\":\"\",\"onFormDataChange\":\"\"}})\nconst formData = reactive({})\nconst optionData = reactive({})\nconst vFormRef = ref(null)\n\nconst submitForm = () => {\n vFormRef.value.getFormData().then(formData => {\n   \u002F\u002F Form Validation OK\n   alert( JSON.stringify(formData) )\n }).catch(error => {\n   \u002F\u002F Form Validation failed\n   ElMessage.error(error)\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:81\u002Fvform3\u002F\" target=\"_blank\">http:\u002F\u002F120.92.142.115:81\u002Fvform3\u002F\u003C\u002Fa>\n\nGithub仓库：\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvform666\u002Fvariant-form3-vite\" target=\"_blank\">https:\u002F\u002Fgithub.com\u002Fvform666\u002Fvariant-form3-vite\u003C\u002Fa>\n\nGitee仓库：\u003Ca href=\"https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form3-vite\" target=\"_blank\">https:\u002F\u002Fgitee.com\u002Fvdpadmin\u002Fvariant-form3-vite\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 3是一款基于Vue 3的低代码表单工具，支持可视化设计和一键生成源码。其核心功能包括拖拽式表单设计、支持多种布局（PC、Pad、H5）、动态加载及复杂交互控制等，并且可以自定义CSS样式、校验逻辑以及国际化多语言配置。此外，它还支持导出为Vue组件或HTML源码，便于集成到现有项目中。此工具特别适合需要快速开发表单界面的应用场景，如企业级管理系统中的数据录入模块等。",2,"2026-06-11 03:20:06","top_language"]