可视化生成页面（2）

[loveyou1]

可视化生成页面（ 2 ）

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

前言

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

百度首页为例。

1: 创建基础布局

2: 加入文字和组件

3: 预览页面

4: 生成代码

开发中

项目功能使用介绍

项目 WiKi 文档

相关开发计划

第二版 [已完成]

• 支持组件

• 添加文字

• 样式可视化

  • flex 布局
  • height
  • 盒子模型 [未完成]

• 两侧可以拖动

• 改造布局侧边栏

  • 分类型

第三版 [未开始]

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

第四版 [未开始]

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

地址

在线地址

项目地址

参考

• UI 参考了 alibaba/designable

• 组件思想参考了 baidu/amis

总结

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

[liximomo]

可否加个微信交流下？ bGl4aW1vbW8=

[iwei000]

关注一下

[sanggao]

哈哈哈 amis 的影子啊

[37Y37]

表四羡慕，大老牛逼

[loveyou1]

@liximomo 可以

[loveyou1]

@sanggao 是的，组件的设计是借鉴于 amis

[zsun86]

话说不是有个 dreamviewer

[bzj]

没搞懂这个有啥用

以前 bootstrap 刚出来的时候有好多这类可视化工具，但是基本没人用，可定制化太差

[scyuns]

现在叫低代码平台