activiti-form-edit

vue-ele-form-generator | vue-ele-form 的表单设计器

介绍

vue-ele-form-generator 是专为 vue-ele-form 开发的可视化表单设计工具, 并且支持vscode 插件、cli 本地启动、在线设计多种方式, 让表单开发的效率更上一层楼!

特性

• 提供vscode 插件更贴近日常开发
• 可视化配置页面
• 提供 vue-ele-form 全部基础组件 和 全部扩展组件
• 支持组件属性点选配置
• 支持本地启动, 告别被墙的痛苦
• 服务器保存, 应用到项目
• 基于项目的多表单管理, 省去二次开发
• 数据持久化(刷新依然存在)
• 一键生成配置 json 数据
• 一键生成.vue 格式内容

帮助文章 Wiki

• 二次开发简单指导

• 如何将 vue form generator 集成到已有项目

• 如何将数据存到服务器

• 如何以守护进程的方式启动 cli 工具

安装 和 使用

第一步: 项目安装 vue-ele-form

本可视化项目是专为 vue-ele-form 组件开发的表单设计器, 如果想要在项目中使用生成的代码, 必须安装 vue-ele-form 组件, 点击查看;

第二步: 使用可视化设计表单

第一种方式: 在线设计地址(有点慢, 请耐心)

• 中国: https://dream2023.gitee.io/vue-ele-form-generator/
• 其它地区(online): https://vue-ele-form-generator.netlify.com/

第二种方式: 本地启动

# 安装
yarn global add fgen-cli # 或 npm install -g fgen-cli

# 基本使用
fgen

# 指定端口
fgen -p 8080

# 更新
yarn global add fgen-cli # 或 npm update -g fgen-cli

第三种方式: vscode 插件

插件市场搜索: fgen-for-vscode, 或者点击链接

生态

Project	Status	Description
vue-ele-form		接基于 ElementUI 的数据驱动表单
vue-ele-form-generator		专为 vue-ele-form 开发的可视化表单设计工具
fgen-cli		本地启动 vue-ele-form-generator 的 cli 工具
fgen-for-vscode		vue-ele-form-generator 的 vscode 扩展
vue-ele-form-json-editor		JSON 编辑器(vue-ele-form 扩展)
vue-ele-form-upload-file		upload 文件上传组件(vue-ele-form 扩展)
vue-ele-form-image-uploader		上传图片增强组件(vue-ele-form 扩展)
vue-ele-form-tree-select		树形选择框组件(vue-ele-form 扩展)
vue-ele-form-table-editor		表格编辑器(vue-ele-form 扩展)
vue-ele-form-dynamic		动态表单(vue-ele-form 扩展)
vue-ele-form-video-uploader		上传视频增强组件(vue-ele-form 扩展)
vue-ele-form-quill-editor		富文本编辑器(vue-ele-form 扩展)
vue-ele-form-markdown-editor		markdown 编辑器(vue-ele-form 扩展)
vue-ele-form-bmap		百度地图组件(vue-ele-form 扩展)
vue-ele-form-codemirror		代码编辑器(vue-ele-form-gallery 扩展)
vue-ele-form-gallery		图片/视频展示组件(vue-ele-form 扩展)

特别感谢赞助者

<tr>
  <td align="center" valign="middle">
    <a href="http://www.youkefu.cn" target="_blank">
      <img width="200px" src="https://portrait.gitee.com/uploads/avatars/user/400/1200081_ukewo_admin_1578945969.png">
      <div>优客服</div>
    </a>
  </td>
  <td align="center" valign="middle">
    <a href="http://www.sagedoit.com/" target="_blank">
      <img width="200px" src="https://i.loli.net/2020/02/10/capiUTAPgCWvLkM.png">
      <div>圣捷远创</div>
    </a>
  </td>
  <td align="center" valign="middle">
    <a href="https://github.com/DamonNie" target="_blank">
      <img width="200px" src="https://avatars2.githubusercontent.com/u/16314117?s=460&v=4">
      <div>damonnie</div>
    </a>
  </td>
  <td align="center" valign="middle">
    <a href="https://github.com/xzusoft" target="_blank">
      <img width="200px" src="https://avatars3.githubusercontent.com/u/12249515?s=460&v=4">
      <div>xzusoft</div>
    </a>
  </td>
</tr><tr></tr>

如果您觉得对您有所帮助, 可以请作者喝一杯咖啡, 让开源走的更远, 点击进入码云赞赏一下, 并加入下面交流群, 将链接发送给我

交流群

Contributors ✨

Thanks goes to these wonderful people (emoji key):

张超杰 📖 💻 🤔

Wisen 💻

IWANABETHATGUY 💻

This project follows the all-contributors specification. Contributions of any kind welcome!