给大家推荐个生成前端代码的工具,支持vue代码,支持组件拖拽

我自己有一个服务器,一直想着做点网页什么的,不然放在那儿都浪费了。无奈作为一个后端,前端的知识不够,就找了一个生成前端代码的工具。我自己用下来,感觉还真不错,推荐给各位。下面这张图就是iVX这个工具的主页,我们直接进入iVX CN后,点击开始开发即可。

我这里为了演示,放了很多控件进去。可以看到有编辑框、按钮、Excel组件选项。还有高德地图的组件,不过需要api,我就没有放。我现在的打算是用iVX先开发一些网页,正好它生成的前端代码都是vue的,一直听说vue不错,所以趁这个机会接触学习一下vue。

在代码编辑器的右上角我们可以选择是使用手机,还是使用电脑,调成电脑后,分辨率会比较大些,也方便观察一些细节。其实我觉得搞明白iVX的组件界面是怎么放置的,非常重要。我因为用java所以顺带着学了Swing,在Swing中有GridLayout 以及 BorderLayout 等布局什么的,但是对于现在前端这一块儿,还有些模糊,但是我知道这个非常重要。毕竟大家学习前端就是画一张皮嘛。就是个浏览器端GUI界面。

首先我对这个布局的要求就是能够跟随窗体的变换而变化,而这个需求在业内有个术语叫做响应式布局,就是比如我在电脑上是一种界面,到了手机上会自动调整。那我了解了一下,在iVX中也有这样的一种布局,叫做栅格系统的页面布局。我们来一起看下。

进入这个布局页面,这是要给demo,我们点击右上角的下载。它就会自动加载这个demo。

如下图所示,这是iVX官网的栅格系统demo,我们也可以直接拿来使用需要做出调整的改一改就可以。

当然,iVX不止栅格系统布局一种,还有我们常用的居中布局和移动三段式布局,具体都可以在iVX的官网布局中看到。在这里我非常建议大家将iVX的官方教程视频教程全部看完。因为我自己瞎琢磨浪费了不少时间。。。发现官网居然直接有教程。。而且教程的制作者明显是个前端高手,iVX用的熟练的很。跟着视频教程学准没错。

接下来我们导出前端源码,在导出之前注意点击上方的保存按钮。

最后是导出后的代码vue文件代码。到这儿就结束了,后续我还想再研究研究,怎么把这个vue文件用在浏览器中,这一步非常关键,因为我们制作出来的代码文件不就是为了使用么,这可真难为一个后端了。在此我也非常推荐大家使用iVX,可以说让我涉足前端的阻力少了许多。

对了,这个iVX后续还会开源的哦,如果对你有用不要忘记点赞收藏评论关注!