前端开发者的福音！通过拖拽就可生成Vue代码的平台来了！前端开发者的福音！通过拖拽

Vue组件代码生成平台 Vue组件代码生成平台是一款面向Vue开发者的拖拽式组件代码生成工具。通过它可以快速搭建Vue组件的代码骨架结构。开发者可在此基础上进行二次开发。
目前该平台非常适合快速搭建一个常见的数据查询组件，仅需要拖三个组件进来即可完成，例如:

文章图片
img12.png 那么它这么牛逼，地址是什么呢？请戳: Low Code Generator
项目地址：https://github.com/sahadev/vue-component-creater-ui
界面及操作介绍主界面主要分为三块区域:

组件库区域，组件库区域主要用于选择组件元素。
组件操作预览区域，该区域主要编辑组件元素的位置与属性。
实时代码生成区域，当组件元素被拖入到预览区域时，该区域会实时生成对应的代码。

文章图片
img1.png 一个简单组件
在熟悉了整个界面的布局之后，我们尝试来生成一个最简单的组件。
首先，将鼠标指针移动到组件元素的上方，此时该组件元素会有一个浅色的效果。

文章图片
img2.png 接着，拖动该组件元素至组件操作预览区域。

文章图片
img3.png 然后放下，此时代码生成区域将会生成对应的代码。

文章图片
img4.png 接下来我们选中刚刚拖入的组件元素，此时右侧会滑出对应的属性编辑框。在这里我们添加一个@click: onClick属性以及class: container的属性，再点击保存，对应的代码便生成了。

文章图片
img10.png

注意: 这时所生成的代码除了在html中有了对应的属性之外，还会在js中生成对应的onClick方法以及在css中生成对应的container类。

完整代码:

/*在此自动生成 */ .container{}

undefined属性代表这些元素里面的值。对于div和span等基础元素来说，如果编辑其undefined属性，则可以在预览区域以及代码生成区域看到实时效果。而对于复合组件来说，则只能看到代码区域的变化。

目前组件代码生成平台支持解析部分v-bind、v-on指令，解析成功后可以直接生成对应的data或者method。另外也支持class类名的解析。如果有一个class的属性，则自动会生成对应的class。

一个复合组件
接下来我们将演示如何由基础组件元素搭建一个复合组件。
最开始我们还是先拖入一个div元素。然后再拖入一个span，这时这个span可以被放置在div的上方。此时在div上方会有一条绿色的辅助线。

文章图片
img6.png 然后释放，span就会被放置到div的前面。
接来下我们再拖入一个a标签，这次我们选择将a标签放置到div下面，同样的会在div的下方出现一条绿色的辅助线。

文章图片
img7.png 除了可以将组件元素放置到另一个组件元素的上面下面之外，也支持被放置在它的内部，例如:

文章图片
img8.png

说明: 在放置组件时可能会遇到像Div这样的块级元素也可能遇到像span这样的行内元素，那么如果是div，则只能拖入到它的上方或者下方，如果span，则可以拖入到它的左方或者右方。

此时，我们所生成的代码为:

/*在此自动生成 */

代码的导出
当把代码拼接完成之后，可以通过右下方的两个按钮将代码拷贝至剪贴板，也支持直接下载到本地，建议直接下载到项目的目录中。

文章图片
img9.png 预览模式
平台支持预览竖屏样式，默认的宽度为375px，点击开关便可切换至竖屏模式:

文章图片
img11.png 对于组件元素的集成平台目前集成了以下几类组件元素，并做了分类:

Html原生元素
Element大部分常见组件
Vant大部分常见组件
iView少部分组件

什么样的组件不能集成

组件中有css属性为position: fixed; 例如vant的Tabbar、SubmitBar等。
动态渲染出来的; 例如Element的Dialog，吐司，消息通知等。

没有您需要组件库?
没关系，可以通过联系我们找到我，然后告诉我需要哪种成熟的组件库，我将会很快集成。

在组件库趋于稳定好用之后，会考虑将源代码开放，使大家一起参与建设。或者可以根据这个项目搭建属于您自己的组件搭建平台。

核心原理介绍我们知道，在编写后的 vue 代码在运行时会生成实际的 Html 代码，而组件生成平台的职责是将这些 Html 再转换为 vue 代码。
为了达到这样的目的，我们目前可行的思路是：将原始的代码文件进行预编译：对指定的 vue 组件分配一个随机 ID，并将这个 vue 文件的代码结构转换为 Json，以 map 的形式存储于 map.js 文件中。在运行时，将 map.js 文件加载进内存。当拖动某个被 lc-mark 标记的元素时，我们可获得这个元素相应的 ID，再通过这个 ID 到 map 中查找，于是获得了对应的原始代码结构。当拖入到某个元素中时，也通过相同的方式获得目标元素的原始代码，再将这两部分原始代码合并，并建立上下级关系。随后，通过新的代码结构，分析对应的@click、v-model、class 等我们所关注的属性，然后再将其生成对应的代码插入到将要生成的 Vue 组件中。如此，便形成了一个较为完整的 Vue 组件代码。
为了实现以上思路，有几项关键技术：