GitHub精选 – 场景化低代码(LowCode)搭建工作台(场景化平台)
《GitHub精选》是我们分享GitHub中优质项目的栏目,包括技术、学习、实用与各种有趣的内容。本期推荐的是一个场景化低代码(LowCode)搭建工作台——Sparrow。
Sparrow是一套场景化低代码搭建页面的工作台,通过预置组件简单拖拉拽就能快速搭建页面,制作完毕后即可在线调试即时体验,实时修改,页面效果所见即所得,并且支持生成源代码。
主要功能:
- 低代码开发,快速生成可读性强、vue element-ui组件库的源代码
- 可视化开发,通过GUI生成页面代码源文件
- 资产市场,代码资源共享,包含组件、编辑区块、静态区块、搜索组件
工作原理:
- 首先选择场景编辑器(表单、表格、区块等),场景编辑器渲染到页面
- 通过特定场景编辑器选择物料(组件、区块),选择动作传到服务器端
- 服务器端生成源代码,输出源代码到预览项目中
- 预览项目通过webpack热更新实时展示效果
安装:
- 全局安装
# 全局安装$ npm install -g sparrow-code# 运行$ sparrow
- 项目内安装
# 项目内安装$ npm install sparrow-code -D# package.json 增加 sparrow"scripts": {"sparrow": "sparrow start -m page"}# 项目内安装GUI组件$ npm install @sparrow-vue/develop-ui -S# 项目内引用App.vue<template><div id="app"><router-view /><sparrow /></div></template><script>import Sparrow from '@sparrow-vue/develop-ui'export default {components: {Sparrow},name: 'App'}</script>
演示:
- 部分组件
- 操作
- 查看代码
更多内容请大家自行前往阅读。
GitHub:https://github.com/sparrow-js/sparrow