0

可视化生成页面(2)

 2 years ago
source link: https://www.v2ex.com/t/800376
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

可视化生成页面( 2 )

在第一版的基础上,完成了第二版的开发计划,加入了组件的支持,部分样式可视化的支持,优化了 UI 界面,修复了部分已知 bug 。

  • 第一篇文章,项目基本介绍
  • 重点
    • ** [思想] 布局去定义组件位置,而不是通过组件调整位置**
    • 组件采用 json 方式做为可视化操作
    • 组件和布局可以随意采用 react 框架做二次开发[相关介绍在后续计划中],以适应自己的相关需求
    • 布局不仅仅是页面,可以在任何需要布局的地方定义

百度首页为例。

1: 创建基础布局

1.png

2: 加入文字和组件

2.png

3.png

3: 预览页面

4.png

4: 生成代码

项目功能使用介绍

项目 WiKi 文档

相关开发计划

第二版 [已完成]

  • 样式可视化

    • flex 布局
    • height
    • 盒子模型 [未完成]
  • 两侧可以拖动

  • 改造布局侧边栏

第三版 [未开始]

  • 构建树可视化
  • 可用性优化
  • 代码生成
    • html 模式
    • react 模式

第四版 [未开始]

  • 支持 css 单位
  • 支持组件库自带布局
  • 项目相关文章
  • 支持后续特性

在线地址

项目地址

在第二版加入了组件的支持,基本满足开发上的需求,但存在常用样式控制依赖于修改 css 代码,页面不能保存,交互体验等问题,以及修复对于组件的支持存在的问题,需要在下一版做改进,在下一版本中需要达到闭环。


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK