三个月手撸好用的Vue3+element的低代码平台三个月手撸低代码平台，已投入项目使用，约几百个页面，前公司有大量的重

项目预览

安装：npm install sun-form-v3@latest

WX20240926-110931@2x.png

为什么搞一个低代码平台

前公司有大量的重复的需求，相信有很多人和我一样，类似有个表格，表格里有一堆查询条件、按钮、点击弹窗增删改查，那么为了偷懒摸鱼，我想着一劳永逸搞一个快速开发的东西，最开始做过一版jquery的，后来扔给后端了，他们现在还在用，但是作为vue开发者，操作dom真的很痛苦，然后就开始接触低代码。

市面上有太多的低代码设计器了，为什么我还要撸一个？

首先，我使用过第三方开发的低代码设计器，如amis等，不得不说很优秀，但是开发起来还是会怪怪的，用起来不舒服，有一些配置使用学习成本太高，有一些功能还反人类，再一个，vue的好用的低代码设计器太少，所以只能自己搞一个了。

那么sunform的优势在哪呢？

如果你会vue，那么你就会使用sunform。在框架设计之初就想着按照vue开发者的开发习惯来设计的，例如：你要写个弹窗，会把modal写进去，在里面写内容，通过一个showModal来控制显示隐藏。那么用sunform的话就是拖进去一个弹窗在里面生成不同的组件，同时控制状态，包括不同组件之间的联动控制，包括每个组件的v-if和v-show都可以和写vue的时候一样操作。
几乎不用看文档。事件的方法我都集中在代码编辑器中了，你只需要右键点击想要操作的组件，所有事件都会给你列好，单击方法自动赋值到编辑器，编辑器是vscode网页版，编辑习惯和使用vscode一样，我还自定义了一些快捷代码片段如err代表app.$message.error(),clog代表console.log()等等，极大滴便捷开发。

WX20240926-131726@2x.png 3.当遇到复杂页面仅仅凭借配置难以满足需求的时候，但是又有一部分可以在低代码生效的时候可以通过slot，vue的插槽来操作，例如：你有个列表+弹窗，列表里的内容可以通过配置生成，弹窗里的内容过于复杂需要手写代码，那么你就可以把低代码当组件的方式引用到页面中，在弹窗中拖入插槽组件，在引入低代码的地方将自定义代码写进去就可以轻松插入到低代码的弹窗中啦。并且组件和低代码之间可以相互通讯，便捷简单。

WX20240926-132339@2x.png

WX20240926-132625@2x.png 4.组件可以拆分来显示，低代码组件可以异步调取低代码组件。例如：还是弹窗和列表，弹窗里的内容过于复杂，那么就新配置一个低代码组件，只存放弹窗里的内容，列表和弹窗当一个组件，这两个组件之间也可以互相通信。不过这个需要做一个配置文件管理的中台而已，我自己也做了一个类似的中台，后续会讲。如图中的两个组件合成一个页面

WX20240926-133304@2x.png

5.多功能表格是对vxe-table的二次封装，使用起来很便捷，如果你恰好也使用vxe-table算是被你掏到了。数据表格可以当分页获取数据，也可以当从表结构。表格中可以引用所有其他的组件，可以树形从表，复杂表头，单元格合并，编辑表格等等。下面示例中可直接点击查看。

6.集成简单。我现在是用node做了个中台来管理所有的低代码配置文件，在开发时候，通过类似你vite的proxy来转发到不同的项目，只不过我在后台处理好了，你只需要配置你的token和baseurl和转发地址就好了，当然这个中台和业务系统是区分开的，在业务中，你需要引入低代码解析器组件根据你生成的配置请求配置文件动态加载。好处是线上改完ctrl+s就可以线上改掉功能了，例如：场景如有个按钮文字需要你改，你要改文字，然后npm run build然后把dist上线部署，现在你只需要找到对应的文字所在地改然后ctrl+s，搞定。

WX20240926-135514@2x.png