V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
lonelyBoy
V2EX  ›  分享创造

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

  •  
  •   lonelyBoy · 2019-05-16 16:00:21 +08:00 · 3641 次点击
    这是一个创建于 2017 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    可视化布局工具 可视化代码 AL 简介

    它是一个适合企业级的前端代码可视化工具

    • 不生成 absolute 这种类似易企秀代码
    • 不是只靠组件生成代码,完全自定义,界面制作可以抛开编辑器
    • 使用在线手动编辑的形式,非 AI 生成代码,比如微软的 sketch2code (根据草图生成代码)在实际运用上还需要很长时间,目前 AL 也在研发这个(根据 UI 视图生成代码)。

    作为唯一一个生成纯 css 可阅读代码的项目。原理是什么呢。 这个可视化布局, 是基于 Tree HTML、Tree css 结构添加上层应用。 基于程序员的思维方式,使用可视化表达出来,所以跟写代码是一样的,不用担心不出来好东西,做不出来只能说“姿势”没对。 树结构的方式可以避免像活动页面一样,导出都是 absolute\fixed.一次性代码。目前这种做的不错,比如易企秀,百度 H5。在线发布,不需要修改源码。

    还有目前类似项目,那就是 Bootstrap 的 layoutit, 我一开始使用就放弃了,因为我是专业的程序员。对于 Bootstrap 这种栅格布局,我觉的不大适合自定义要求高的,并且有依赖(这个还好说)。然后对属性等操作不强,并且不是开源的。无法进行扩展然后达到可真正使用的地步(对于我而言,并没有否认它完全没价值)

    那 AL 可视化布局生成代码的项目到底长什么样子的呢

    image

    image

    image

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

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

    体验地址 GITHUBhttps://github.com/0123cf/auto-layout

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


    使用方式

    image 分为四个区

    • 第一个是在插入布局。
    • 第二个是控制区,可以选中要修改的位置、删除当前位置的布局、新增兄弟节点等
    • 第三个是编辑属性,可以修改长度、添加文字、修改颜色、添加图片
    • 第四个是源码预览,代码下载等功能,点击右下角

    之后还会添加多个页面之间的联系和 REM 等功能。

    参与

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

    image

    -END-

    8 条回复    2019-05-21 08:58:30 +08:00
    shuang
        1
    shuang  
       2019-05-17 00:35:18 +08:00
    4.2M 的 js,没有 gzip,整个网页加载了 40 多秒才打开
    拖拽到中间了没任何反应,是我操作方式不对吗
    lonelyBoy
        2
    lonelyBoy  
    OP
       2019-05-17 08:56:11 +08:00
    @shuang 嗯 没有做和分包 gzip 优化 测试阶段 拖拽还未实现哦
    lonelyBoy
        3
    lonelyBoy  
    OP
       2019-05-17 15:34:18 +08:00
    您好,已优化到 2s 了。
    azh7138m
        4
    azh7138m  
       2019-05-17 15:54:19 +08:00
    图片都 403 了,为啥不用个专业图床?
    azh7138m
        5
    azh7138m  
       2019-05-17 15:57:41 +08:00
    lonelyBoy
        6
    lonelyBoy  
    OP
       2019-05-17 17:55:42 +08:00
    蟹蟹~~ 话说 图片 403 呜,我这边正常 下次注意
    Alife8
        7
    Alife8  
       2019-05-19 10:40:02 +08:00
    FusionCool 也可以了解一下!
    zw1one
        8
    zw1one  
       2019-05-21 08:58:30 +08:00
    楼上推荐竞品的太秀了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2784 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 14:20 · PVG 22:20 · LAX 06:20 · JFK 09:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.