# jvue

**Repository Path**: 83945105/jvue

## Basic Information

- **Project Name**: jvue
- **Description**: Vue后台管理快速成型工具
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 69
- **Forks**: 22
- **Created**: 2020-12-27
- **Last Updated**: 2025-04-25

## Categories & Tags

**Categories**: backend

**Tags**: None

## README

# Vue后台管理快速成型工具

## Vue表单设计器

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

## Links

- Vue表单设计器在线地址
  - [官网（推荐）](https://www.codeup.work/jvue/jform/#/designer)
  - [GitHub](https://83945105.github.io/jvue/jform/#/designer)
  - [国内(gitee)](http://83945105.gitee.io/jvue/jform/#/designer)
- Vue表单设计器在线文档（编写中，近期发布）
  - [GitHub](https://83945105.github.io/jvue/docs/zh)
  - [国内(gitee)](http://83945105.gitee.io/jvue/docs/zh)
  
## FAQ

1. 表单设计器适用人群？
    - 千变一律的表单代码写吐了，想通过技术手段生成代码然后稍微改改即可使用的各位大佬
    - 后端兼职写前端，对vue不是太熟悉或对组件库属性记不太清楚的后端程序员
    - 刚入行的新人，抱着学习的心态，把生成的代码作为学习参考
    
2. 如何集成到自己的项目中？
    - 使用iframe技术
    - 尝试下访问 [集成地址](http://83945105.gitee.io/jvue/jform/#/designer?fullScreen=2)
    - 其实就是在表单设计器的地址后面加上 `?fullScreen=2` 参数即可实现无边化全屏
 
3. 如何给作者提建议&需求？
    - 给我们提[Issues](https://github.com/83945105/jvue/issues) [国内(gitee)](https://gitee.com/83945105/jvue/issues)
    - 通过Vue表单设计器在线地址右上角的`联系我们`功能
    - 加入我们的技术讨论群
    
## 技术讨论群

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

<img alt="QQ群: 699850713" src="https://gitee.com/83945105/jvue/raw/main/assets/Vue表单设计器技术讨论QQ群（1）.jpg" width="300">

## 开发计划
- ~~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正式上线可以到 `更新日志` 中查看