Vue3 低代码方向交流 - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
请不要在回答技术问题时复制粘贴 AI 生成的内容
xuanmo
V2EX    程序员

Vue3 低代码方向交流

  •  
  •   xuanmo 2024-04-16 11:31:14 +08:00 4025 次点击
    这是一个创建于 542 天前的主题,其中的信息可能已经有所发展或是发生改变。

    背景

    一直以来,都希望做一套完整组件库,结合以下两点:

    1. Vue 3 正式版已经发布;
    2. 刚好现在公司在做的产品,迎来新版从零迭代,主要负责表单低代码平台建设,从中让我受益匪浅,学到很多东西,比起之前我实现的 Vue 2 版表单,功能强大太多,也让我做在做设计时,有了不一样的构思和想法;

    关于为什么要做这件事

    1. 首先是从零开发一套组件库,可以接触到平时工作业务代码不一样的东西,本质上和写业务的思考也是不一样的,写组件库不用考虑很多业务逻辑,逻辑偏独立、公用,更能锻炼自己,业务组件则需要考虑很多业务相关的逻辑;
    2. 目前比较感兴趣的方向是低代码,公司的产品是低代码平台相关,功能做的很强大,自己想做一下设计器这块的架构、也把自己的一些想法实现出来;
    3. 也做了 6 年多的前端了,自己也应该有点不一样的东西和答卷,再加上做了 2 年多表单,对这块的也有一些不一样的理解,结合低代码 + 组件库来实现;
    4. 也希望通过开源能认识更多朋友。

    目前的进度

    从 2022 年 4 月开始,从技术选型、整体架构、方案确定、一期需要完成的功能,立项到现在,已经完成 27 个组件,移动端表单也已经能够覆盖日常大部分需求;

    目前更多的细节是没有完善的,一期还是以功能为主,按照目前的构思,要做的东西有很多,只能分阶段进行,欢迎有兴趣的朋友加入;

    技术栈:Vue3 + TS 。

    整体发展方向

    1. 一期主要实现基础组件、布局、表单解析等组件(这部分不区分 PC 、H5 ),移动端实现表单字段组件,设计器能够满足现有组件的搭建;
    2. 二期主要是开发更多的组件,完善生态;
    3. 三期的规划是等 1 、2 做完。

    相关组件

    1. 组件库官网:https://www.xuanmo.xin/-/dl-ui
    2. GitHub:https://github.com/D-xuanmo/dl-ui
    3. 数据校验插件:https://github.com/D-xuanmo/validator
    4. 在线运行时:https://run.xuanmo.xin

    目前表单的架构

    https://upyun.xuanmo.xin/dl-ui/DLForm.PNG

    第 1 条附言    2024-04-16 15:58:26 +08:00
    1. 目前主要是做的运行解析,因为可以独立使用,后端也可以配置出来;
    2. 二期会做配套的设计器,通过设计器来可视化配置;
    36 条回复    2024-04-17 16:00:41 +08:00
    lm930129
        1
    lm930129  
       2024-04-16 11:37:25 +08:00
    感觉 vform 就已经很强了,表单内嵌套表单或者嵌套抽屉,很多表单设计器都是做不到的,自定义程度也非常高。
    shilianmlxg
        2
    shilianmlxg  
       2024-04-16 12:02:57 +08:00 via iPhone
    @lm930129 #1 大佬 vue3 还有哪些好用的业务 npm 包呢
    类似 vform 之类的
    xuanmo
        3
    xuanmo  
    OP
       2024-04-16 12:30:33 +08:00
    @lm930129 感谢认可,我想的就是表单只作为容器,具体形式由组件决定
    xuanmo
        4
    xuanmo  
    OP
       2024-04-16 12:32:47 +08:00
    @shilianmlxg 没有去找过这些
    Retas
        5
    Retas  
       2024-04-16 13:46:45 +08:00
    官网字体是衬线体,在线运行时的网站没问题
    murmur
        6
    murmur  
       2024-04-16 13:48:30 +08:00   1
    你别做了,做不出来了,我们在针对一个 vue3 的低代码做二开,光二开就够头大了,还是有全部源码的

    为了低开,所有的数据全 json 的,你能想到一个页面 最后都写成<form :optiOns=xxxx></form>,然后这个 options 有上千行的痛苦么
    jedeft
        7
    jedeft  
       2024-04-16 13:51:51 +08:00
    小哥执行力可以,不过不看好这类产品。给你提个想法,做一个根据后台接口文档自动生成管理界面的工具。
    用户提供一套后台接口文档,比如 swagger ,可以自动产生后台管理界面。接口文档更新后,页面也可以自动跟随更新。
    gitdoit
        8
    gitdoit  
       2024-04-16 13:53:32 +08:00   1
    @murmur 复杂度并不会消失,只会以另一种形式存在吗
    akakidz
        9
    akakidz  
       2024-04-16 14:04:38 +08:00   1
    @gitdoit 真的是,我司去年搞了一版本,后面操作复杂度已经需要专门学习培训后才能用,最后的最后是根本没人愿意用至少网上的东西还能百度到解决方案。
    我觉得这种东西,在设计初期就要考虑到面向的场景和客户,尽可能提供一个最简版,给到明确的人群去做应用,复杂度稍微高的需求 还是正常开发吧,投入的精力和回报很难形成正比
    19cm
        10
    19cm  
       2024-04-16 14:34:25 +08:00
    项目从头到尾一波人写没问题,如果经历过两三波人,二开三开,就是屎山了,因为接手的人压根没事情从头到尾去熟悉一遍然后去改,都是打补丁
    RainCats
        11
    RainCats  
       2024-04-16 15:37:38 +08:00
    低代码初期简单易用,中期各种细节配置多到令人发指,后期,后期还没经历过
    xuanmo
        12
    xuanmo  
    OP
       2024-04-16 15:54:23 +08:00
    @murmur 二期会做配套的可视化设计器,第一期主要是做解析块,因为可以独立使用
    xuanmo
        13
    xuanmo  
    OP
       2024-04-16 15:56:14 +08:00
    @jedeft 嗯,后期是准备做配套的设计器的,目前主要是先做的运行解析这块
    xuanmo
        14
    xuanmo  
    OP
       2024-04-16 16:00:54 +08:00
    @RainCats 如果纯 JSON 手动配置,确实会很头疼,如果有可视化界面,来抹平这块,还是可以的
    TomVista
        15
    TomVista  
       2024-04-16 16:03:20 +08:00
    @murmur 哈哈哈哈哈哈哈哈哈哈哈哈 , 说的没错
    zhx643
        16
    zhx643  
       2024-04-16 16:09:38 +08:00
    现在也在做这一块的东西,但是对于业务上比较复杂的表单(表单联动效果)来说,还是要写很多 Watch 之类的东西去控制,然后还要根据当前业务封装很多业务组件。目前是想重构一下拖拽生成的配置页和简化配置相关的东西
    alicifes
        17
    alicifes  
       2024-04-16 16:10:18 +08:00
    我前司搞过这个一整套的低代码,主要是拿来给运维人员使用,拖拽组件构建表单,还有各种配置,挺麻烦的
    lyonbot
        18
    lyonbot  
       2024-04-16 16:13:30 +08:00
    我现在工作就是做低代码平台的,在公司里倒腾三年了,现在最大问题是 1业务不乐意付费 2乐意付费的都想要无代码全套平台 3平台的封装,使得学习门槛和调试排错很蛋疼
    xzg1993
        19
    xzg1993  
       2024-04-16 16:15:45 +08:00
    今天刚接触到公司一个同事做的低代码平台,感觉还不错。就在后端管理页面,创建一个表单,自动同步到数据库,之后围绕表单可以做一系列的拖拉拽,比如填写表单页面的哪些数据,用哪种方式填写。

    最后点击保存,页面就生成了,移动端和 pc 端自动适配。觉得挺好用的。
    xuanmo
        20
    xuanmo  
    OP
       2024-04-16 16:17:02 +08:00
    @zhx643 我们联动这块都是通过可视化配置来做的,联动可以做的无代码,包含数据联动这些,我后续的联动方向也是这个方向
    xuanmo
        21
    xuanmo  
    OP
       2024-04-16 16:18:15 +08:00
    @lyonbot 我也是,我主要做表单生态这块,但是我觉得表单不仅仅是表单,他可以是任意的,我们产品就是配套的低代码
    xuanmo
        22
    xuanmo  
    OP
       2024-04-16 16:20:03 +08:00   1
    @xzg1993 和我们差不多,也是这样的,建表开始,都是不写代码,除非对样式定制要求高的,需要写点 css ,低代码毕竟是通用的,如果业务也要定制,那就是需要埋点进行二开
    RainCats
        23
    RainCats  
       2024-04-16 16:39:38 +08:00
    @xuanmo 阿不,我参与过一个低代码平台是初始阶段,也参与过一个中期阶段的,配置都是界面上的,但细节太多了,复杂度很高,对新手不友好
    clue
        24
    clue  
       2024-04-16 17:25:39 +08:00
    低代码只适用于特定、同质化的领域, 比如 问卷调查、运营活动这样的
    否则你会发现, 配置化的东西灵活度不如代码, 还有额外的学习成本, 毕竟需求复杂度在那里, 你的配置化压缩信息也是有极限的

    我个人更看好语法糖、工具/hooks 类的提取优化
    brazz
        25
    brazz  
       2024-04-16 17:36:05 +08:00
    请问可以实现以下功能吗?
    brazz
        26
    brazz  
       2024-04-16 17:36:44 +08:00
    1 、支持自定义配置工作流的流程模型,支持文件导入流程图,支持在线设计流程图(可视化拖拽布局)
    2 、支持通过拖动表单元素生成相应的工作流表单,覆盖 Element UI 所有的表单组件
    3 、支持自定义用户分组,可用于工作流的审批分组
    4 、支持新建、取消流程等操作,高亮流程图、审批时间线
    5 、支持通过、不通过、转发、委派、退回等操作
    6 、支持移动端使用( uniapp )
    jy02534655
        27
    jy02534655  
       2024-04-16 17:48:14 +08:00
    @murmur 低代码这块要看针对人群,如果是面向开发人员,你在生成 options 之后,通过 options+Velocity 这种模板语言去生成源码就好很多,只要模板配的好,理论上可以生成任何类型的代码,这样可玩性就高很多了。比如 http://home.pig4cloud.com:38081/#/login?redirect=/&params={} 这个里面就是这种玩法
    jy02534655
        28
    jy02534655  
       2024-04-16 17:54:17 +08:00
    低代码平台应该有设计器、解析器、出码模块
    面向非研发人员,提供简单易用的设计器,在设计后通过解析器解析了就直接可用
    面向研发人员,用户可以自行配置出码模板,通过设计器设计后通过出码模块直接生成对应代码,代码风格可控,易于修改。
    xuanmo
        29
    xuanmo  
    OP
       2024-04-16 18:13:08 +08:00
    @jy02534655 是的,低代码都是有配套设计器、解析器的,也支持业务自己写组件,平台只是做赋能,至于组件有什么配置,怎么样实现由组件定,平台需要考虑自身的通用能力
    murmur
        30
    murmur  
       2024-04-17 09:31:26 +08:00
    @brazz 这种东西不建议自己开发,直接去买套什么泛微蓝凌来用,别人的流程引擎可以爆锤开源的版本
    lujiaosama
        31
    lujiaosama  
       2024-04-17 10:04:26 +08:00
    @gitdoit 然后还引入了额外的学习成本. 看到最后不如直接上手改.
    test4zhou
        32
    test4zhou  
       2024-04-17 10:15:41 +08:00
    没必要死磕所谓低代码。被吹得神乎其神,然而用起来“神”的方面仅限于没有复杂业务的增删改查,稍微加点复杂业务的话,使用难度非常高,且后期维护成本太夸张了。个人开发过且使用过第三方的所谓低代码,那学习成本、维护成本有点都不低,,,
    web1996
        33
    web1996  
       2024-04-17 11:54:20 +08:00 via Android
    模板商城,插件商城的模式会不会是另外一条路。
    v2li32
        34
    v2li32  
       2024-04-17 14:15:16 +08:00
    拖拽生成 人看的代码 然后 复制粘贴使用。 或者配合后端的 swagger 直接接口也绑定上。 都生成 json+组件这种的 头大。。
    xuanmo
        35
    xuanmo  
    OP
       2024-04-17 15:59:28 +08:00
    @web1996 搞物料平台,大家一起开发,可玩性就高了
    xuanmo
        36
    xuanmo  
    OP
       2024-04-17 16:00:41 +08:00
    @v2li32 设计器都是配套和后端一起的,不是生成代码在去拷贝,这种模式相当于纯前端,失去低代码的意义了
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     911 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 32ms UTC 21:58 PVG 05:58 LAX 14:58 JFK 17:58
    Do have faith in what you're doing.
    ubao snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86