这是一个创建于 2022 天前的主题，其中的信息可能已经有所发展或是发生改变。
本人试过目前已有的可视化布局工具，发现都不尽人意，不是说功能不够，而是一开始就行不通，于是就搞了一个可视化在线布局工具
可视化布局工具 可视化代码 AL 简介
它是一个适合企业级的前端代码可视化工具
- 不生成 absolute 这种类似易企秀代码
- 不是只靠组件生成代码，完全自定义，界面制作可以抛开编辑器
- 使用在线手动编辑的形式，非 AI 生成代码，比如微软的 sketch2code （根据草图生成代码）在实际运用上还需要很长时间，目前 AL 也在研发这个（根据 UI 视图生成代码）。
作为唯一一个生成纯 css 可阅读代码的项目。原理是什么呢。
这个可视化布局, 是基于 Tree HTML、Tree css 结构添加上层应用。
基于程序员的思维方式，使用可视化表达出来，所以跟写代码是一样的，不用担心不出来好东西，做不出来只能说“姿势”没对。
树结构的方式可以避免像活动页面一样，导出都是 absolute\fixed.一次性代码。目前这种做的不错，比如易企秀，百度 H5。在线发布，不需要修改源码。
还有目前类似项目，那就是 Bootstrap 的 layoutit， 我一开始使用就放弃了，因为我是专业的程序员。对于 Bootstrap 这种栅格布局，我觉的不大适合自定义要求高的，并且有依赖（这个还好说）。然后对属性等操作不强，并且不是开源的。无法进行扩展然后达到可真正使用的地步（对于我而言，并没有否认它完全没价值）
那 AL 可视化布局生成代码的项目到底长什么样子的呢
使用程序员的思维，使用 flex 布局。
没有多余组件依赖，直接生成 css 代码，html 代码
体验地址 GITHUB： https://github.com/0123cf/auto-layout
项目放在 GITHUB 上面
auto-layout 可视化布局、自动化 css 布局
使用方式
分为四个区
- 第一个是在插入布局。
- 第二个是控制区，可以选中要修改的位置、删除当前位置的布局、新增兄弟节点等
- 第三个是编辑属性，可以修改长度、添加文字、修改颜色、添加图片
- 第四个是源码预览，代码下载等功能，点击右下角
之后还会添加多个页面之间的联系和 REM 等功能。
参与
目前的技术栈是: react react-redux ts
-END-
 |
1
shuang 2019-05-17 00:35:18 +08:00
4.2M 的 js，没有 gzip，整个网页加载了 40 多秒才打开
拖拽到中间了没任何反应，是我操作方式不对吗 |
 |
3
lonelyBoy OP 您好，已优化到 2s 了。
|
 |
4
azh7138m 2019-05-17 15:54:19 +08:00
图片都 403 了，为啥不用个专业图床？
|
|
5
azh7138m 2019-05-17 15:57:41 +08:00
|
|
6
lonelyBoy OP 蟹蟹~~ 话说 图片 403 呜，我这边正常 下次注意
|
 |
7
Alife8 2019-05-19 10:40:02 +08:00
FusionCool 也可以了解一下！
|
 |
8
zw1one 2019-05-21 08:58:30 +08:00
楼上推荐竞品的太秀了
|
Select Language