Vue3 低代码方向交流

[xuanmo]

背景

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

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

目前表单的架构

1. 目前主要是做的运行解析，因为可以独立使用，后端也可以配置出来；
2. 二期会做配套的设计器，通过设计器来可视化配置；

[lm930129]

感觉 vform 就已经很强了，表单内嵌套表单或者嵌套抽屉，很多表单设计器都是做不到的，自定义程度也非常高。

[shilianmlxg]

@lm930129 #1 大佬 vue3 还有哪些好用的业务 npm 包呢
类似 vform 之类的

[xuanmo]

@lm930129 感谢认可，我想的就是表单只作为容器，具体形式由组件决定

[xuanmo]

@shilianmlxg 没有去找过这些😂

[Retas]

官网字体是衬线体，在线运行时的网站没问题

[murmur]

你别做了，做不出来了，我们在针对一个 vue3 的低代码做二开，光二开就够头大了，还是有全部源码的

为了低开，所有的数据全 json 的，你能想到一个页面 最后都写成<form :options=xxxx></form>，然后这个 options 有上千行的痛苦么

[jedeft]

小哥执行力可以，不过不看好这类产品。给你提个想法，做一个根据后台接口文档自动生成管理界面的工具。
用户提供一套后台接口文档，比如 swagger ，可以自动产生后台管理界面。接口文档更新后，页面也可以自动跟随更新。

[gitdoit]

@murmur 复杂度并不会消失,只会以另一种形式存在吗 😄

[akakidz]

@gitdoit 真的是，我司去年搞了一版本，后面操作复杂度已经需要专门学习培训后才能用，最后的最后是根本没人愿意用😂至少网上的东西还能百度到解决方案。
我觉得这种东西，在设计初期就要考虑到面向的场景和客户，尽可能提供一个最简版，给到明确的人群去做应用，复杂度稍微高的需求 还是正常开发吧，投入的精力和回报很难形成正比

[tianzi123]

项目从头到尾一波人写没问题,如果经历过两三波人,二开三开,就是屎山了,因为接手的人压根没事情从头到尾去熟悉一遍然后去改,都是打补丁

[RainCats]

低代码初期简单易用，中期各种细节配置多到令人发指，后期，后期还没经历过

[xuanmo]

@murmur 二期会做配套的可视化设计器，第一期主要是做解析这块，因为可以独立使用

[xuanmo]

@jedeft 嗯，后期是准备做配套的设计器的，目前主要是先做的运行解析这块

[xuanmo]

@RainCats 如果纯 JSON 手动配置，确实会很头疼，如果有可视化界面，来抹平这块，还是可以的

[TomVista]

@murmur 哈哈哈哈哈哈哈哈哈哈哈哈 , 说的没错

[zhx643]

现在也在做这一块的东西，但是对于业务上比较复杂的表单（表单联动效果）来说，还是要写很多 Watch 之类的东西去控制，然后还要根据当前业务封装很多业务组件。目前是想重构一下拖拽生成的配置页和简化配置相关的东西

[alicifes]

我前司搞过这个一整套的低代码，主要是拿来给运维人员使用，拖拽组件构建表单，还有各种配置，挺麻烦的

[lyonbot]

我现在工作就是做低代码平台的，在公司里倒腾三年了，现在最大问题是 1️⃣业务不乐意付费 2️⃣乐意付费的都想要无代码全套平台 3️⃣平台的封装，使得学习门槛和调试排错很蛋疼

[xzg1993]

今天刚接触到公司一个同事做的低代码平台，感觉还不错。就在后端管理页面，创建一个表单，自动同步到数据库，之后围绕表单可以做一系列的拖拉拽，比如填写表单页面的哪些数据，用哪种方式填写。

最后点击保存，页面就生成了，移动端和 pc 端自动适配。觉得挺好用的。

[xuanmo]

@zhx643 我们联动这块都是通过可视化配置来做的，联动可以做的无代码，包含数据联动这些，我后续的联动方向也是这个方向

[xuanmo]

@lyonbot 我也是，我主要做表单生态这块，但是我觉得表单不仅仅是表单，他可以是任意的，我们产品就是配套的低代码

[xuanmo]

@xzg1993 和我们差不多，也是这样的，建表开始，都是不写代码，除非对样式定制要求高的，需要写点 css ，低代码毕竟是通用的，如果业务也要定制，那就是需要埋点进行二开

[RainCats]

@xuanmo 阿不，我参与过一个低代码平台是初始阶段，也参与过一个中期阶段的，配置都是界面上的，但细节太多了，复杂度很高，对新手不友好

[clue]

低代码只适用于特定、同质化的领域, 比如 问卷调查、运营活动这样的
否则你会发现, 配置化的东西灵活度不如代码, 还有额外的学习成本, 毕竟需求复杂度在那里, 你的配置化压缩信息也是有极限的

我个人更看好语法糖、工具/hooks 类的提取优化

[brazz]

请问可以实现以下功能吗？

[brazz]

1 、支持自定义配置工作流的流程模型，支持文件导入流程图，支持在线设计流程图（可视化拖拽布局）
2 、支持通过拖动表单元素生成相应的工作流表单，覆盖 Element UI 所有的表单组件
3 、支持自定义用户分组，可用于工作流的审批分组
4 、支持新建、取消流程等操作，高亮流程图、审批时间线
5 、支持通过、不通过、转发、委派、退回等操作
6 、支持移动端使用（ uniapp ）

[jy02534655]

@murmur 低代码这块要看针对人群，如果是面向开发人员，你在生成 options 之后，通过 options+Velocity 这种模板语言去生成源码就好很多，只要模板配的好，理论上可以生成任何类型的代码，这样可玩性就高很多了。比如 http://home.pig4cloud.com:38081/#/login?redirect=/&params={} 这个里面就是这种玩法

[jy02534655]

低代码平台应该有设计器、解析器、出码模块
面向非研发人员，提供简单易用的设计器，在设计后通过解析器解析了就直接可用
面向研发人员，用户可以自行配置出码模板，通过设计器设计后通过出码模块直接生成对应代码，代码风格可控，易于修改。

[xuanmo]

@jy02534655 是的，低代码都是有配套设计器、解析器的，也支持业务自己写组件，平台只是做赋能，至于组件有什么配置，怎么样实现由组件定，平台需要考虑自身的通用能力

[murmur]

@brazz 这种东西不建议自己开发，直接去买套什么泛微蓝凌来用，别人的流程引擎可以爆锤开源的版本

[lujiaosama]

@gitdoit 然后还引入了额外的学习成本. 看到最后不如直接上手改.

[test4zhou]

没必要死磕所谓低代码。被吹得神乎其神，然而用起来“神”的方面仅限于没有复杂业务的增删改查，稍微加点复杂业务的话，使用难度非常高，且后期维护成本太夸张了。个人开发过且使用过第三方的所谓低代码，那学习成本、维护成本有点都不低，，，

[web1996]

模板商城，插件商城的模式会不会是另外一条路。

[v2li32]

拖拽生成 人看的代码 然后 复制粘贴使用。 或者配合后端的 swagger 直接接口也绑定上。 都生成 json+组件这种的 头大。。

[xuanmo]

@web1996 搞物料平台，大家一起开发，可玩性就高了

[xuanmo]

@v2li32 设计器都是配套和后端一起的，不是生成代码在去拷贝，这种模式相当于纯前端，失去低代码的意义了