sparrow-js基于场景的低代码构建-了解
简介sparrow-js是一个基于场景的低代码(LowCode)构建工作台,通过运行基于场景的编辑器生成源码,重点支持日常业务开发效率Tips,核心目标只有一个“提高研发效率”,目前提供了基于vue和element-ui组件库中的后台项目的解决方案。主要有以下功能:低代码开发,快速生成源码,可读性强,vueelement-ui组件库。可视化开发,通过GUI生成页面代码源文件。资产市场、代码资源共享,包括组件、区块、场景搭建编辑器。优势Sparrrow的核心目标是“提高效率”,所以功能不仅仅是简单的UI可视化构建,目前提供功能级构建,提供业务逻辑代码组装,生成源码供二次开发;易于扩展,通过AST读取组件源码并组装。只要把页面的逻辑拆开,就可以任意组装;可以和项目结合,技术上使用本地运行的服务器服务,可以和项目深度结合,实现更多的效率提升方式。更大的可操作空间;目录结构。├──README.md├──sparrow//sparrow的核心功能,包括可视化构建和源码生成服务│├──package.json│└──packages├──sparrow-vue-develop//项目安装界面│├──babel.config.js│├──package.json│├──public│├──src│└──vue.config.js├──sparrow-vue-site//文档站点│├──deploy.sh│├──docs│└──package.json└──vue-market//assetmarket├──blocks├──boxes└──componentsstructurediagram工作原理首先,选择场景编辑器(表单、表格、块等),场景编辑器渲染到页面;通过特定的场景编辑器选择素材(组件、块),并将选择动作传送到服务器;服务器生成源码,将源码输出到预览工程;预览工程会通过webpack热更新实时展示效果;快速启动全局安装#全局安装$npminstall-gsparrow-code#run$installationinsparrowproject#安装在项目中$npminstallsparrow-code-D#package.jsonAddsparrow"scripts":{"sparrow":"sparrowstart-mpage"}#在项目中安装GUI组件$npminstall@sparrow-vue/develop-ui-S#在项目中引用App.vue
项目中安装效果图项目使用:vue-admin-template功能介绍操作界面资产市场资产市场负责生产组件、区块、模板、场景编辑器等原材料,供开发者使用;//vue-market目录Structure.├──README.md├──blocks//Blocks│├──BasicException│├──BasicForm│├──BasicTable│├──block.json│├──package.json│├──script│├──src│└──table.json├──boxes//场景编辑器│├──build│├──examples│├──package.json│├──src│└──tsconfig.json└──components└──README.mdgit地址场景编辑器场景编辑器负责胶合资产,使用对应的场景编辑器可以可视化构建各种业务需求页面编辑器目录├──components│├──ArrayListBox│├──BoxForm│├──ComponentBox│├──ConfigBox│├──ContainerBox│├──CustomInline│├──InlineToolbar│├──LabelBox│├───LogicBox│├──TableBox│├──TableCellBox│├──TableHeaderBox│├──TabsBox│├──block│├──box│├──layout│├──paragraph│└──toolbar├──index.jsgit地址https://github.com/sparrow-js/vue-market/tree/master/boxs表单编辑器提供表单组件构建、组件配置、表单容器组装功能;选择表单编辑器;set在右侧配置区填写数据;选择左侧的组件;预览图如下:table表格提供初始化、删除、编辑、链接、弹窗等功能。如果你对其他场景编辑器感兴趣,可以自己体验一下。。。Block定位是一个可重用的代码片段,可以在项目中随意更改。它是基于原子设计理论的页面分类层之一。有很多优秀的。基于原子设计理论的开源项目沉淀的素材可供参考。预览网址https://sparrow-js.github.io/sparrow-vue-site/guide/market/block.html提示
该区块来自开源项目,并且源码已标注,开源项目原作者如有问题,请联系:sparrowwht7@gmail.com生成源码示例:以下为sparrow生成的源码,代码质量可以不断改进。主文件