可视化生成代码 (3)

[loveyou1]

在第二版的基础上，大致完成了第三版的开发计划，加入了项目的概念，支持节点树可视化操作节点，支持导出代码，修复了部分已知 bug 。项目基本达到了一个闭环，可以阐述一下的我对于这个项目的一个想法

一. 需要的是什么？

简洁的操作界面，支持 React 生态的组件库，提供二次开发能力，生成所见即所得的 UI 代码。

二. 希望项目能做什么？

• 减少重复的 UI
• 基础界面能够脱离编辑器
• 可见即可得的布局

前言

• 「 项目基本介绍 」
• 「 项目基本使用 」
• 重点
  一.「 思想 」布局去定义组件位置，而不通过组件调整位置
  二. 组件采用 Json 方式做为可视化操作
  三. 组件和布局可以随意采用 React 框架做二次开发「 相关介绍在后续计划中 」，以适应自己的相关需求

Demo

一. 创建项目

主要是需要保存项目进度，防止刷新，页面异常等情况，需要及时保存。

二. 基本页面

1. 通过布局定义结构
2. 通过点击或节点树选中节点
3. 操作节点相关属性

三. 生成代码

四. 下载代码本地运行代码

1. 导出代码
2. 导入到项目目录
3. 引入相关依赖
4. 相关位置引入项目代码
5. 运行项目

五. 运行效果

开发计划

第四版 [未开始]

• 支持 css 单位 [不在考虑支持，推荐使用插件直接进行 px 到相关单位的转换]
• 支持组件库自带布局 [✅]
• 国际化
• 项目优化（可用性，实用性）
• 项目相关文章（基于其他组件库做二次开发）
• 支持后续特性

第五版 [看后续需求]

地址

在线地址

项目地址

后续

项目还未经过具体项目实践的，目前还有几个重要问题在解决中，最近的项目中看是否能具体进行实践，记录问题到第四，五版的开发中。

[Imindzzz]

技术不错

[luqingliang]

加油

[qW7bo2FbzbC0]

dreamweaver?

[ArJun]

资本家知道有这好事，迟早会把 crud 的工作卷没了

[loveyou1]

@hjahgdthab750 有点类型，已经很久没用这个了，不知道现在能实现什么功能。

[loveyou1]

@ArJun 怎么可能了？

[jomsou]

低代码雏形？？

[Kasumi20]

哥，monaco-editor 怎么用啊？

[TomatoYuyuko]

有点像 dreamweaver，面向 UI 设计师？那可以加强一些 css 方面的功能

[lyz1990]

小时候玩的 dreamweaver 和 frontpage ？

[loveyou1]

统一回复：至于像不像 dreamweaver，我觉得是用法上像，我也是借鉴了它的思路。但是这个更具体一些吧，比如，支持 React 组件库，只支持 React.....。

[loveyou1]

@Kasumi20 这个可能后面要专门介绍一下，和 amis 差不多，看着组件属性写组件。

[foufoufm]

如果碰到要手写的业务组件呢？

[jorneyr]

专业的不会用，专业的不会用

[yaojin]

感谢开源

[loveyou1]

@jorneyr 其实还好了，只是这一部分文档还没来得及写，就是 《快捷键 + 可视化操作》，只是现在可视化操作还挺弱的，有些 css 需要自己去写，后面慢慢补上。

[loveyou1]

@Dearlaywer 业务组件不影响的，只要你引入到你开发的项目中就好，二次开发的组件的时候会有路径这个选项的。但这部分也现在也挺弱的，奈何时间就这么多，要上班，要生活，还要干其他的，都得慢慢来......。