可视化生成代码 (3)

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

一. 需要的是什么？

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

二. 希望项目能做什么？

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

前言

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

Demo

一. 创建项目

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

二. 基本页面

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

三. 生成代码

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

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

五. 运行效果

开发计划

第四版 [未开始]

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

第五版 [看后续需求]

地址

在线地址

项目地址

后续

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