{"id":21141090,"url":"https://github.com/vform666/variant-form3-vite","last_synced_at":"2026-01-27T02:03:08.191Z","repository":{"id":41805475,"uuid":"441665323","full_name":"vform666/variant-form3-vite","owner":"vform666","description":null,"archived":false,"fork":false,"pushed_at":"2024-11-26T10:01:49.000Z","size":774,"stargazers_count":1456,"open_issues_count":23,"forks_count":291,"subscribers_count":13,"default_branch":"master","last_synced_at":"2025-03-14T13:14:01.494Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vform666.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-25T11:29:19.000Z","updated_at":"2025-03-12T05:23:52.000Z","dependencies_parsed_at":"2023-11-20T06:46:59.466Z","dependency_job_id":"c9712fe1-d97d-4b50-97ad-b250f99e5c3a","html_url":"https://github.com/vform666/variant-form3-vite","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/vform666/variant-form3-vite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form3-vite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form3-vite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form3-vite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form3-vite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vform666","download_url":"https://codeload.github.com/vform666/variant-form3-vite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vform666%2Fvariant-form3-vite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28796962,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-27T01:07:07.743Z","status":"online","status_checked_at":"2026-01-27T02:00:07.755Z","response_time":168,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-20T07:22:02.294Z","updated_at":"2026-01-27T02:03:07.962Z","avatar_url":"https://github.com/vform666.png","language":"Vue","funding_links":[],"categories":["Vue"],"sub_categories":[],"readme":"# Variant Form 3 For Vue 3.x\n#### 一款高效的Vue 3低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。\n\n![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)\n\n\u003cbr/\u003e\n\n### 立即体验VForm 3\n[在线Demo](http://120.92.142.115:81/vform3/)\n\n### 🎉🎉\u003cmark\u003e基于VForm3的全栈低代码平台已发布\u003c/mark\u003e🎉🎉\n![meta_low_code](https://vform666.com/mele.png)\n\u003cbr/\u003e\n[美乐低代码——立即进入](https://melecode.com/) （私有部署、开箱即用️，已开源✌✌）️\n\n### 立即体验VForm 3 Pro高级版（提供商业支持）\n[VForm 3 Pro Demo](https://www.vform666.com/pro/)\n\n### 视频教程集合：\n[B站观看](https://space.bilibili.com/626932375)\n \n### 适合Vue 2的版本看这里\n[点此查看](https://gitee.com/vdpadmin/variant-form)\n \n### 友情链接\n\n[Fantastic-admin](https://hooray.gitee.io/fantastic-admin/) —— 一款开箱即用的 Vue 中后台管理系统框架（支持Vue2/Vue3）\n\n### 功能一览\n```\n\u003e 拖拽式可视化表单设计；\n\u003e 支持PC、Pad、H5三种布局；\n\u003e 支持运行时动态加载表单；\n\u003e 支持表单复杂交互控制；\n\u003e 支持自定义CSS样式；\n\u003e 支持自定义校验逻辑；\n\u003e 支持国际化多语言；\n\u003e 可导出Vue组件、HTML源码；\n\u003e 可导出Vue的SFC单文件组件；\n\u003e 支持开发自定义组件；\n\u003e 支持响应式自适应布局；\n\u003e 支持VS Code插件；\n\u003e 更多功能等你探究...；\n```\n\n### 安装依赖\n```\nnpm install --registry=https://registry.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/\u003e\n\n### 跟Vue 3.x项目集成\n\n\u003cbr/\u003e\n\n#### 1. 安装包\n```bash\nnpm i vform3-builds\n```\n或\n```bash\nyarn add vform3-builds\n```\n\n\u003cbr/\u003e\n\n#### 2. 引入并全局注册VForm 3组件\n```\nimport { createApp } from 'vue'\nimport App from './App.vue'\n\nimport ElementPlus from 'element-plus'  //引入element-plus库\nimport 'element-plus/dist/index.css'  //引入element-plus样式\n\nimport VForm3 from 'vform3-builds'  //引入VForm 3库\nimport 'vform3-builds/dist/designer.style.css'  //引入VForm3样式\n\nconst app = createApp(App)\napp.use(ElementPlus)  //全局注册element-plus\napp.use(VForm3)  //全局注册VForm 3(同时注册了v-form-designer和v-form-render组件)\n\napp.mount('#app')\n```\n\n\u003cbr/\u003e\n\n#### 3. 在Vue 3.x模板中使用表单设计器组件\n```bash\n\u003ctemplate\u003e\n\u003cv-form-designer ref=\"vfdRef\"\u003e\u003c/v-form-designer\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\nconst vfdRef = ref(null)\n\u003c/script\u003e\n\n\u003cstyle lang=\"scss\"\u003e\nbody {\nmargin: 0;  /* 如果页面出现垂直滚动条，则加入此行CSS以消除之 */\n}\n\u003c/style\u003e\n```\n\n\u003cbr/\u003e\n\n#### 4. 在Vue 3.x模板中使用表单渲染器组件\n```html\n\u003ctemplate\u003e\n\u003cdiv\u003e\n \u003cv-form-render :form-json=\"formJson\" :form-data=\"formData\" :option-data=\"optionData\" ref=\"vFormRef\"\u003e\n \u003c/v-form-render\u003e\n \u003cel-button type=\"primary\" @click=\"submitForm\"\u003eSubmit\u003c/el-button\u003e\n\u003c/div\u003e\n\u003c/template\u003e\n\u003cscript setup\u003e\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 = () =\u003e {\n vFormRef.value.getFormData().then(formData =\u003e {\n   // Form Validation OK\n   alert( JSON.stringify(formData) )\n }).catch(error =\u003e {\n   // Form Validation failed\n   ElMessage.error(error)\n })\n}\n\u003c/script\u003e\n```\n\n\u003cbr/\u003e\n\n### 资源链接\n\u003chr\u003e\n\n文档官网：\u003ca href=\"https://www.vform666.com/\" target=\"_blank\"\u003ehttps://www.vform666.com/\u003c/a\u003e\n\n在线演示：\u003ca href=\"http://120.92.142.115:81/vform3/\" target=\"_blank\"\u003ehttp://120.92.142.115:81/vform3/\u003c/a\u003e\n\nGithub仓库：\u003ca href=\"https://github.com/vform666/variant-form3-vite\" target=\"_blank\"\u003ehttps://github.com/vform666/variant-form3-vite\u003c/a\u003e\n\nGitee仓库：\u003ca href=\"https://gitee.com/vdpadmin/variant-form3-vite\" target=\"_blank\"\u003ehttps://gitee.com/vdpadmin/variant-form3-vite\u003c/a\u003e\n\n更新日志：\u003ca href=\"https://www.vform666.com/changelog.html\" target=\"_blank\"\u003ehttps://www.vform666.com/changelog.html\u003c/a\u003e\n\n订阅Pro版：\u003ca href=\"https://www.vform666.com/pro/\" target=\"_blank\"\u003ehttps://www.vform666.com/pro/\u003c/a\u003e\n\n技术交流群：扫如下二维码加群\n\n![image](https://vform2022.ks3-cn-beijing.ksyuncs.com/vchat_qrcode.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvform666%2Fvariant-form3-vite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvform666%2Fvariant-form3-vite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvform666%2Fvariant-form3-vite/lists"}