V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
loveyou1
V2EX  ›  JavaScript

可视化生成代码 (3)

  •  
  •   loveyou1 · 2021-10-11 09:04:54 +08:00 · 3355 次点击
    这是一个创建于 899 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    一. 需要的是什么?

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

    二. 希望项目能做什么?

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

    前言

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

    Demo

    一. 创建项目

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

    1.png

    二. 基本页面

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

    2.png

    三. 生成代码

    3.png

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

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

    4.png

    五. 运行效果

    5.png

    开发计划

    第四版 [未开始]

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

    第五版 [看后续需求]

    地址

    在线地址

    项目地址

    后续

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

    17 条回复    2021-10-11 18:52:30 +08:00
    Imindzzz
        1
    Imindzzz  
       2021-10-11 09:31:39 +08:00
    技术不错
    luqingliang
        2
    luqingliang  
       2021-10-11 09:34:06 +08:00
    加油
    qW7bo2FbzbC0
        3
    qW7bo2FbzbC0  
       2021-10-11 09:49:47 +08:00   ❤️ 1
    dreamweaver?
    ArJun
        4
    ArJun  
       2021-10-11 09:53:11 +08:00
    资本家知道有这好事,迟早会把 crud 的工作卷没了
    loveyou1
        5
    loveyou1  
    OP
       2021-10-11 12:21:52 +08:00
    @hjahgdthab750 有点类型,已经很久没用这个了,不知道现在能实现什么功能。
    loveyou1
        6
    loveyou1  
    OP
       2021-10-11 12:23:34 +08:00
    @ArJun 怎么可能了?
    jomsou
        7
    jomsou  
       2021-10-11 13:00:19 +08:00
    低代码雏形??
    Kasumi20
        8
    Kasumi20  
       2021-10-11 14:42:10 +08:00
    哥,monaco-editor 怎么用啊?
    TomatoYuyuko
        9
    TomatoYuyuko  
       2021-10-11 14:43:43 +08:00
    有点像 dreamweaver,面向 UI 设计师?那可以加强一些 css 方面的功能
    lyz1990
        10
    lyz1990  
       2021-10-11 16:20:04 +08:00
    小时候玩的 dreamweaver 和 frontpage ?
    loveyou1
        11
    loveyou1  
    OP
       2021-10-11 17:42:25 +08:00
    统一回复:至于像不像 dreamweaver,我觉得是用法上像,我也是借鉴了它的思路。但是这个更具体一些吧,比如,支持 React 组件库,只支持 React.....。
    loveyou1
        12
    loveyou1  
    OP
       2021-10-11 17:43:19 +08:00
    @Kasumi20 这个可能后面要专门介绍一下,和 amis 差不多,看着组件属性写组件。
    foufoufm
        13
    foufoufm  
       2021-10-11 18:27:13 +08:00
    如果碰到要手写的业务组件呢?
    jorneyr
        14
    jorneyr  
       2021-10-11 18:36:00 +08:00
    专业的不会用,专业的不会用
    yaojin
        15
    yaojin  
       2021-10-11 18:37:48 +08:00
    感谢开源
    loveyou1
        16
    loveyou1  
    OP
       2021-10-11 18:50:33 +08:00
    @jorneyr 其实还好了,只是这一部分文档还没来得及写,就是 《快捷键 + 可视化操作》,只是现在可视化操作还挺弱的,有些 css 需要自己去写,后面慢慢补上。
    loveyou1
        17
    loveyou1  
    OP
       2021-10-11 18:52:30 +08:00
    @Dearlaywer 业务组件不影响的,只要你引入到你开发的项目中就好,二次开发的组件的时候会有路径这个选项的。但这部分也现在也挺弱的,奈何时间就这么多,要上班,要生活,还要干其他的,都得慢慢来......。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3151 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 12:33 · PVG 20:33 · LAX 05:33 · JFK 08:33
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.