虽然之前我们就上过一次Github Trending 榜单，但是还是不介意再上一次，哈哈。

好了言归正传，我来解释下这个项目是做什么的，为什么这么受欢迎。

这个项目是做什么的？

基于Vue 页面设计器，只需用拖拽的方式就能设计并生成完整的html文件或是Vue组件，直接可用。

如果你是前端开发者

能减少大量的重复工作，常用组件从左边组件库拖拽即可，每个组件有不同的属性，点击设计器中的组件就可以在右边配置各种属性，各种布局控件能满足大部分的复杂页面的涉及需求。如果我们提供的这些组件还不能满足您的需求，我们提供了自定义组件，您只需要在自定义区域写自己代码即可。

如果你是后端开发者

大量内置控件能满足你的需求，css样式也是内置了，如果没有特别复杂的需求，不用写任何前端代码，只需要在设计器中拖动控件就能完成页面设计，实时预览页面效果，数据生成JSON格式，你只需要关注后端开发，提供Resful 接口即可轻松实现前后端的交互。

如果你想搭建自己的一套设计器

您可以基于我们的源码进行二次开发，我们提供源码和文档，助你快速搭建属于自己的网站设计器。

项目截图

1分钟快速创建一个页面

我们以新闻发布页面为例子

第一步

如图拖动控件到设计器中间，根据业务需要修改字段标识和标题两个参数：

分类使用的是下拉框组件，需要设置参数，可以设置静态参数和远程参数:

设置为远端数据，只需自己写好和后端交互代码，将数据交给页面渲染

相关代码

remoteFuncs: {

func_test (resolve) {

// 下拉选择框 select_1566990949275

// 获取到远端数据后执行回调函数

// resolve(data)

// 模拟数据获取

setTimeout(() => {

const options = [

{value: 'value1', label: 'label1'},

{value: 'value1', label: 'label1'},

{value: 'value1', label: 'label1'},

]

// 对象中 value、label 是设计器中配置的值和标签

resolve(options)

}, 2000)

},

}

第二步

没有第二步，直接预览：

点击预览按钮即可查看效果：

也可以插入数据测试：

点击获取数据即可得到刚才添加的数据：

以上新闻纯属扯淡，不用太当真，要不然真会甩出个大更新出来。

如果你觉得设计的页面满意了，点击生产代码：

直接保存成html 文件即可打开运行，是不是很简单！

更多详情和开发文档请访问下方链接

工具地址：

http://tools.xiaoyaoji.cn/form

GitHub地址：

https://github.com/GavinZhuLei/vue-form-making