一个开源可视化布局项目，在线生成纯css布局，可阅读的代码的代码

2019-04-26 本文已影响236人反者道之动001

本人试过目前已有的可视化布局工具，发现都不尽人意，不是说功能不够，而是一开始就行不通，于是就搞了一个可视化在线布局工具

为什么现有的行不通呢？

我觉得原因如下
要么是代码生成的一塌糊涂，要么是absolute这种不可维护代码
要么就是用已有的组件，生成非专业代码，并且有更大的局限性
要么就是很牛逼的AI生成代码，比如微软的sketch2code.看起来很牛逼，但是用起来，其实用不了。可能再过一百年就可以了。

那如何才能做可行的可视化布局呢,我觉得还是需要从根源找起，然后慢慢添加上层应用，用程序员的思维，方式，再用可视化表达出来。

那就是Tree

没有树，那么只能像活动页面一样，导出都是absolute\fixed.

目前活动做的不错，比如易企秀，百度H5。但是只适合活动页面，不需要修改源码的。

还有目前也有tree的项目，那就是Bootstrap官方的layoutit,但是
对于Bootstrap这种栅格布局，我觉的不大适合自定义要求高的，并且有依赖（这个还好说）。然后对属性等操作不强，并且不是开源的。无法进行扩展然后达到可真正使用的地步（对于我而言，并没有否认它完全没价值）

那我的项目是什么样子的呢。

看下图

image.png

使用程序员的思维，使用flex布局。

没有多余组件依赖，直接生成css代码，html代码

现在可体验下。要完全使用，还需要点时间。只要思路正确，扩展、添加上层应用，就可以做到目前AI不够发达的情况下，最好用的可视化布局方式。

项目放在GITHUB上面
auto-layout 可视化布局、自动化css布局

我会继续添加REM布局等。
也欢迎大家一起为开源做共享。

目前的技术栈是: react react-redux ts

待做的还有很多。加油！

-END-