# wplugin-form-generator

**Repository Path**: sqbiz/wplugin-form-generator

## Basic Information

- **Project Name**: wplugin-form-generator
- **Description**: Element UI表单设计及代码生成器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: biz-minions
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1534
- **Created**: 2022-10-26
- **Last Updated**: 2022-11-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 简介

- 同类型项目，建议参考[wplugin-variant-form](https://gitee.com/sqbiz/wplugin-variant-form)
- Element UI表单设计及代码生成器，可将生成的代码直接运行在基于Element的vue项目中；也可导出JSON表单，使用配套的解析器将JSON解析成真实的表单
- [预览地址](https://sqbiz.gitee.io/wplugin-form-generator)
- 项目模块
  - 主模块: src/view/index
  - 渲染器: src/components/render
  - 配套JSON解析器: src/components/parser
  - tinymce编辑器(CND加载): src/components/tinymce
  - 预览模块: src/view/preview
  - [配套vscode插件](https://github.com/JakHuang/form-generator-plugin)

## 安装使用

```js
// 安装
npm i @sqbiz/wplugin-form-generator

// 引入
import WpluginFormGenerator from '@sqbiz/wplugin-form-generator'
import '@sqbiz/wplugin-form-generator/lib/wplugin-form-generator.css'
Vue.use(WpluginFormGenerator)

// 使用
<WpluginFormGenerator></WpluginFormGenerator>
```

## 开发

- 确保已经安装node.js 10+

```bash
# 安装项目依赖
npm install

# 本地开发
npm run dev

# 构建案例(可直接部署到web服务器中)
build:example

# 构建主模块库和预览模块库
npm run lib-all

# 构建扩展库并发布到npm
# 第一构建按照 lerna 多包管理工具
npm install lerna -g
# 如果使用了 nrm 管理镜像
nrm use npm
# 发布
lerna publish
nrm use taobao
```

## 文档

- [el-dialog的封装与调用](https://github.com/JakHuang/form-generator/wiki/el-dialog%E7%9A%84%E5%B0%81%E8%A3%85%E4%B8%8E%E8%B0%83%E7%94%A8)
- [项目主要结构分析](https://github.com/JakHuang/form-generator/wiki/%E9%A1%B9%E7%9B%AE%E4%B8%BB%E8%A6%81%E7%BB%93%E6%9E%84%E5%88%86%E6%9E%90)
- [【常见问题】如何以npm的方式集成monaco编辑器](https://github.com/JakHuang/monaco-vue-demo)
- 系列教程：
[《表单设计器 · 开发教程》](https://github.com/JakHuang/form-generator/issues/30)
[《表单解析器 · 开发教程》](https://github.com/JakHuang/form-generator/issues/32)
[《vue代码生成器 · 开发教程》](https://github.com/JakHuang/form-generator/issues/31)
[《vue代码预览器 · 开发教程》](https://github.com/JakHuang/form-generator/issues/33)
- [JSON表单参数对照表](https://github.com/JakHuang/form-generator/issues/46)

## JSON解析器

将保存在数据库中的JSON表单，解析成真实的表单  
[查看在线示例](https://mrhj.gitee.io/form-generator/#/parser) 
[更多信息](https://github.com/JakHuang/form-generator/tree/dev/src/components/parser) 

## vscode插件

帮助使用element UI的开发者完成基本的表单代码搭建任务，减少重复的劳动。  
vscode-plugin分支配套插件为：[form-generator-plugin](https://github.com/JakHuang/form-generator-plugin)；  
使用插件可右键打开设计器，直接将代码保存到工程中。  
安装插件请在vscode中搜索：Form Generator Plugin

## PR鸣谢

- [Mr_HJ/form-generator](https://gitee.com/mrhj/form-generator)
- [IWANABETHATGUY](https://github.com/IWANABETHATGUY)

## 开源协议

[MIT](https://opensource.org/licenses/MIT)