[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8967":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":22,"topics":23,"createdAt":10,"pushedAt":10,"updatedAt":24,"readmeContent":25,"aiSummary":26,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":27,"discoverSource":28},8967,"k-form-design","Kchengz\u002Fk-form-design","Kchengz","基于vue Ant-Design 的表单设计器，快速开发","",null,"Vue",1251,308,34,13,0,2,20.47,"MIT License",false,"develop",true,[],"2026-06-12 02:02:01","# 表单设计器 k-form-design\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Fvue\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fvue-2.6.10-brightgreen.svg\" alt=\"vue\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FvueComponent\u002Fant-design-vue\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAnt%20Design%20Vue-1.5.1-blue\" alt=\"ant-design-vue\">\n  \u003C\u002Fa>\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002FKchengz\u002Fk-form-design\u002Fblob\u002Fmaster\u002FLICENSE\">\n    \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fmashape\u002Fapistatus.svg\" alt=\"license\">\n  \u003C\u002Fa>\n\u003C\u002Fp>\n\n![](https:\u002F\u002Fcdn.epicjs.cn\u002Fdemo.gif)\n\n\n\n\u003Cb>感谢您的支持！由于已经将项目的重心转向 Vue 3 版本设计器，对于k-form-design项目决定暂停维护更新，欢迎您使用全新的 Vue3 版本设计器[ epic-designer](https:\u002F\u002Fgitee.com\u002Fkcz66\u002Fepic-designer)，以便享受到更多优化和功能！\u003C\u002Fb>\n\n## 简介\n\n基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速\n\n- [github](https:\u002F\u002Fgithub.com\u002FKchengz\u002Fk-form-design)\n- [码云](https:\u002F\u002Fgitee.com\u002Fkcz66\u002Fk-form-design)\n- [项目预览](https:\u002F\u002Fkform.epicjs.cn\u002Fpreview.html)\n- [项目文档](https:\u002F\u002Fkform.epicjs.cn)\n- [项目文档(备用地址)](https:\u002F\u002Fkchengz.github.io\u002Fk-form-design\u002F)\n\n## 特性\n- 可视化配置页面\n- 提供栅格、表格等布局\n- 布局嵌套使用\n- 提供预览、保存、生成json、生成可执行代码等操作\n- 支持表单验证\n- 快速获取表单数据\n- 自定义组件插入\n- 自定义主题色\n\n## 组件\n- KFormDesign 表单设计器（基于可视化操作快速设计出表单页面，生成配置json或页面）\n- KFormBuild 表单构建器（根据设计器中获取的配置json数据，快速构建出表单页面）\n\n\n\n## 安装\n\n> 安装表单设计器\n\n```cmd\nnpm i k-form-design --save\n \n# OR\nyarn add k-form-design\n```\n\n> 安装 ant-design-vue UI ，推荐 vue2 版本最新的 1.7.8版本\n\n```cmd\nnpm i ant-design-vue@1.7.8 --save\n\n# OR\nyarn add ant-design-vue@1.7.8\n```\n\n### \n\n## 引入组件\n\n``` javascript\n\u002F\u002F 在main.js引入\n\n\u002F\u002F 注：useComponents 需放最上面，优先注册懒加载组件\nimport { useAntd } from 'k-form-design\u002Fpackages\u002Fcore\u002FuseComponents'\nimport KFormDesign from 'k-form-design\u002Fpackages\u002Fuse.js'\nimport 'k-form-design\u002Flib\u002Fk-form-design.css'\n\nuseAntd(Vue)\nVue.use(KFormDesign)\n```\n\n## 使用组件\n``` html\n\u003Ctemplate>\n  \u003Cdiv>\n   \u003Ck-form-design \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## 交流\n点击链接加入qq群聊\n\n- [【k-form-desgin交流群：1020643215】](https:\u002F\u002Fjq.qq.com\u002F?_wv=1027&k=5BeoFAr) \n- [【k-form-desgin交流二群：727396923】](https:\u002F\u002Fjq.qq.com\u002F?_wv=1027&k=uYyqQPlQ)\n\nLicense\n---\n[MIT](https:\u002F\u002Fgithub.com\u002FKchengz\u002Fk-form-design\u002Fblob\u002Fmaster\u002FLICENSE)\nCopyright (c) 2019 Kchengz\n\n","k-form-design是一个基于Vue和Ant-Design-Vue的表单设计器，旨在通过可视化操作简化表单开发流程。其核心功能包括提供多种布局选项（如栅格、表格等）、支持布局嵌套、预览与保存设计成果、生成JSON配置文件及可执行代码，以及实现表单验证和快速数据获取。此外，它还允许用户自定义组件和主题色，以满足个性化需求。该项目非常适合需要高效构建复杂表单的应用场景，尤其是在前端开发中追求快速原型制作和迭代的项目。虽然官方已宣布停止对本项目的维护并推荐迁移到Vue 3版本的新工具epic-designer，但k-form-design仍然是一个强大的选择，特别是对于仍在使用Vue 2的技术栈。","2026-06-11 03:20:35","top_language"]