当前位置: 首页 > Web前端 > vue.js

前端开发者的福音!一个可以拖拽生成Vue代码的平台来了!

时间:2023-04-01 11:54:37 vue.js

/*这里自动生成*/.container{}Vue组件代码生成平台Vue组件代码生成平台是一款面向Vue开发者的拖拽式组件代码生成工具。通过它可以快速搭建Vue组件的代码骨架结构。开发者可以在此基础上进行二次开发。目前该平台非常适合快速搭建一个通用的数据查询组件。只需拖入三个组件即可完成。例如:原来这么牛逼,地址是什么?请点击:LowCodeGenerator界面及操作介绍主界面主要分为三个区域:组件库区,主要用于选择组件元素。组件操作预览区,主要编辑组件元素的位置和属性。实时代码生成区,当组件元素被拖入预览区时,该区域会实时生成相应的代码。一个简单的组件在熟悉了整个界面的布局后,我们尝试生成一个最简单的组件。首先,将鼠标指针移到组件元素上,组件元素就会出现浅色效果。然后,将组件元素拖到组件操作预览区。然后放下,此时代码生成区会生成相应的代码。接下来,我们选中刚刚拖入的组件元素,相应的属性编辑框就会在右侧滑出。这里我们添加了一个@click:onClick属性和class:container属性,然后点击保存,相应的代码就生成了。注意:生成的代码除了html中对应的属性外,还会生成js中对应的onClick方法和css中对应的容器类。完整代码:/*这里自动生成*/.container{}undefined属性表示这些元素内部的值。对于div、span等基础元素,编辑其undefined属性,可以在预览区和代码生成区看到实时效果。对于复合组件,只能看到代码区的变化。目前组件代码生成平台支持解析部分v-bind和v-on指令。解析成功后,可以直接生成相应的数据或方法。此外,它还支持类类名的解析。如果有class属性,会自动生成对应的class。复合组件接下来我们将演示如何从基本组件元素构建复合组件。一开始我们还是拖进去了一个div元素。然后拖进去一个span,然后span就可以放在div上面了。这时候div上面会有一条绿色的辅助线。然后松开,span就会放到div的前面。接下来,我们再拖入一个a标签,这次我们选择将a标签放在div下面,div下面也会出现一条绿色的辅助线。组件元素除了可以放在另一个组件元素的上下,也支持放在里面,例如:说明:在放置组件的时候,可能会遇到块级元素,比如Div或者块级元素,比如Foraninline像span这样的元素,如果是div,只能拖到它上面或者下面,如果是span,就可以拖到它的左边或者右边。此时,我们生成的代码是:/*这里自动生成*/代码导出时代码拼接完成后,可以通过右下方两个按钮将代码复制到剪贴板,也支持直接下载到本地,建议直接下载到项目目录.预览模式平台支持预览竖屏样式。默认宽度为375px。点击开关切换到竖屏模式:组件元素集成平台目前集成了以下几种类型的组件元素,并进行了分类:Html原生元素元素大型一些常用组件Vant大部分常用组件iView少数几个组件什么样的组件不能集成?组件中有一个css属性就是position:fixed;例如Vant的Tabbar、SubmitBar等动态渲染;比如Element的Dialog、toast、消息通知等,需要组件库吗?没关系,你联系我们找我,然后告诉我你需要哪个成熟的组件库,我会尽快集成。待组件库稳定易用后,我们会考虑开放源码,让大家一起参与建设。或者您可以基于该项目构建自己的组件构建平台。核心原理介绍我们知道,写好的Vue代码会在运行时生成实际的Html代码,而组件生成平台的职责就是将这些Html转换成Vue代码。为了达到这个目的,我们目前可行的思路是对原始代码文件进行预编译:给指定的vue组件分配一个随机ID,将vue文件的代码结构转换成Json,以map的形式存储在地图.js文件。在运行时,将map.js文件加载到内存中。当拖动一个lc-mark标记的元素时,我们可以得到这个元素对应的ID,然后通过这个ID在map中查找,从而得到对应的原始代码结构。当拖入一个元素时,同样得到目标元素的原始代码,然后合并原始代码的两部分,建立上下级关系。然后通过新的代码结构,解析对应的@click、v-model、class等我们关心的属性,然后将对应的代码插入到要生成的Vue组件中。这样一个比较完整的Vue组件代码就形成了。为了实现上述思想,有几个关键技术:Vue组件的解析,生成上下层组件之间的数据结构关系html元素与Vue代码的对应关系Vue代码的关键字分析,如@click将代码转换为Objects,ConvertingObjectstoCodeGuidance行定位和绘图常见问题解答期待您的提问。联系我们如果您有任何问题或建议,可以通过以下方式与我联系:邮箱:sahadev@foxmail.com或shangbin1@tal.com知音楼:172332也可以在线讨论:GitterIM