Vue表单快速开发：一键生成可视化表单代码插件

╰+攻爆jí腚メ 2022-09-12 00:55 299阅读 0赞

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16][]

# 前因后果 #

对于后端Java开发人员来讲，前端代码一直是个蹩脚的事情。

对于我们来讲，如果能够快速的生成表格，然后再简单的配置下vue的语法，把数据填充进去，就可以大大简化我们的开发难度，提升开发效率了。

那么，有没有可以自动生成表单的插件之类的呢？

放心，太阳底下没有新鲜事情。

你遇到的问题，其它的前辈们也遇到了，也帮你找到了解决方法。

社会我平头哥，人狠话不多。

在这里，给大家推荐一个结合了ElementUI的表单自动生成插件：form-generator。

# form-generator #

## 传送门 ##

国内镜像：[form-generator: Element UI表单设计及代码生成器][form-generator_ Element UI]

看之前，你可以先简单体验下：[体验传送门][Link 1]

## 庐山真面目 ##

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

## 特点  ##

### 勾搭简单，易上手 ###

1、直接拖拽左边的控件

2、然后再在右边对控件（命名规范、CSS样式、提示语句、默认值）等进行设置

3、点击运行，就可以看到对应的源代码了。

还很人性化的，让你可以二选一。是不是很奥利给？

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

生成的代码，如果不满意，还可以进行定制哦

你可以对源代码进行预览或调试之后，再下载对应的vue文件，复制到项目中。

或者你也可以直接复制源码到现有的项目文件中。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

领导再也不用担心你的前端了。

它和element-UI完美结合，完全贴合国人的大众的审美标准。

是不是很心动了，心动就对了。

赶紧试一试呗，还等啥？

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/4a6521bd35e24cebae5115785b648341.png
[form-generator_ Element UI]: https://gitee.com/mrhj/form-generator
[Link 1]: https://mrhj.gitee.io/form-generator/#/
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/96708ad324d040f0b57dd0d17a1533de.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/28f5f47ea8af48e6b70f439b93b25368.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5rKb5rKb6ICB54i5_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/f9967b6c734944b08ba589cfbfe2bc54.png