Code Monkey home page Code Monkey logo

jvue's Introduction

Vue后台管理快速成型工具

Vue表单设计器

特色

  • 支持ElementUI组件库,未来计划添加更多组件库支持
  • 支持多达37种控件(按需会持续添加),满足各种业务场景
  • 支持子表单控件,可实现以下三种数据格式
model: {
    obj: {},        // 对象表单
    arr: [],        // 数组表单
    objArr: [{}]    // 对象数组表单
}
  • 组件配置详细,基本1:1还原了对应组件库组件的所有配置,当然,为了界面简洁不常用的配置我们放在了高级设置里
  • 支持生成JSON逆向渲染出表单(需安装@jvue/jform 国内(gitee)
    • 格式遵循vue render结构,使用render函数解析JSON顺滑自然
    • 支持特殊语法透传属性、事件、插槽给渲染器内部控件,这可以使JSON模式灵活度丝毫不亚于直接生成vue代码,而且我们还在相关事件、作用域插槽的参数之中,提供了如当前表单实例、表单model等变量方便开发
  • 支持直接生成vue代码,不想使用JSON模式的可以选择这种方式,简单粗暴,生成的vue代码无需任何依赖直接copy至你的项目中即可运行
  • 支持复杂的表单校验规则
  • 支持通过导入sql建表语句快速生成表单模板,向后端的小伙伴要来建表语句导入生成后,只需要稍微调整下即可使用,方便快捷
  • 控件之间的组合非常灵活,表单设计器灵活度越高,遇到需求时越不容易捉襟见肘

Links

FAQ

  1. 表单设计器适用人群?

    • 千变一律的表单代码写吐了,想通过技术手段生成代码然后稍微改改即可使用的各位大佬
    • 后端兼职写前端,对vue不是太熟悉或对组件库属性记不太清楚的后端程序员
    • 刚入行的新人,抱着学习的心态,把生成的代码作为学习参考
  2. 如何集成到自己的项目中?

    • 使用iframe技术
    • 尝试下访问 集成地址
    • 其实就是在表单设计器的地址后面加上 ?fullScreen=2 参数即可实现无边化全屏
  3. 如何给作者提建议&需求?

    • 给我们提Issues 国内(gitee)
    • 通过Vue表单设计器在线地址右上角的联系我们功能
    • 加入我们的技术讨论群

技术讨论群

使用QQ App扫描二维码加入我们一起讨论

QQ群: 699850713

开发计划

  • v1.0.1
    1. 新增 新建 功能,实现以数据的角度创建表单
    2. 新增 导入建表Sql 功能,用于快速生成表单模板
  • v1.0.2
    1. 支持 撤销重做 功能
  • v1.0.3
    1. 生成代码功能支持生成简化版代码,与组件库组件props默认值一致的属性不生成在代码中,当然这是可选的
    2. 导入建表sql后,支持一键将所有控件调整为 描述 控件且取消所有校验规则,主要用于快速生成 详情 表单
    3. 支持一键清除所有控件表单校验规则
    4. 插槽控件 数据格式 配置支持不设置(默认),如果不设置则不会在表单 model 中生成对应属性
    5. 生成代码页面支持一键复制代码
  • v2.0.0 v1.0.4 本来预计更新 1、2 条,但是改着改着发现了很多问题,重构了很多代码,为了提供优质的体验,我们决定直接推出2.0版本,对应Vue2,算是本项目正式推出,文档、官网会同步上线,这可能会花费一些时间准备,不过请放心,我们没有弃坑。
    1. 正式推出JSON动态渲染模式,文档上线
    2. 新增 面板分割 控件,属于布局控件
    3. 其它还有好多等2.0正式上线可以到 更新日志 中查看

jvue's People

Contributors

83945105 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.