基于VUE 开发的 表单设计器

  1. k-form-design 基于vue和ant-design-vue实现的表单设计器
  • 组件预览地址
    http://cdn.kcz66.com/form-design.html

  • 组件地址
    https://www.npmjs.com/package/k-form-design

  • 开源地址

    https://github.com/Kchengz/k-form-design

  1. 第二种 基于开源Element UI表单设计及代码生成器
    Form Generator

    github仓库 https://github.com/JakHuang/form-generator

    码云仓库 https://gitee.com/mrhj/form-generator

    演示地址 https://mrhj.gitee.io/form-generator/#/

这两种可视化设计器都是开源的,可通过点击或拖拽的方式设计基本表单, 设计器生成的代码可直接运行在基于 vue 的项目中

# 拓展 #

vscode插件 form-generator-plugin

此项目将form-generator的vscode-plugin分支封装为一个vscode插件,拓展了form-generator的文件写入能力; 帮助使用element UI的开发者完成基本的表单代码搭建任务,减少重复的劳动。
基于VUE 开发的 表单设计器_第1张图片

	使用插件可右键打开设计器,直接将代码保存到工程中。
	安装插件请在vscode中搜索:
	
	`jakHuang
	或
	Form Generator Plugin`
  • 插件源码 https://github.com/JakHuang/form-generator-plugin
  • 插件使用的设计器源码 https://github.com/JakHuang/form-generator/tree/vscode-plugin

你可能感兴趣的:(前端,vue)