1

如何做一个低代码平台?这个开源项目看看!

 2 years ago
source link: https://blog.didispace.com/tj-opensouce-lowcode-sparrow/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

如何做一个低代码平台?这个开源项目看看!

平日里大家编码的时候肯定想着如何能提高自己的工作效率,那么一种方法肯定是提高自身的编码水平,但是同时工欲善其事必先利其器,如果有一款好的工具,说不定也能实现提升开发效率。

今天TJ君要跟大家分享的就是这样一款场景化低代码(LowCode)搭建工作台, sparrow,通过简单的操作实时输出源代码

sparrow支持基于vue、element-ui组件库的中后台项目的输出,目标只有一个,那就是:

提升开发效率!!!!

用过之后就会发现,sparrow的优势主要体现在两个方面:

1、使用方便,通过对拥有业务逻辑的代码的组装,可以完成函数级别的项目搭建,靠拖拉拽就可以,不需要太多手工编码,最终生成可供开发使用的源代码。

2、可扩展性,可以通过AST读取组件源代码,进行组合,只要页面的逻辑是可拆解的就可以任意组装;

基于上述两个方面,sparrow的特性可以总结为三个特点:

  • 低代码开发, 快速生成可读性强、vue element-ui组件库的源代码。
  • 可视化开发, 通过GUI生成页面代码源文件。
  • 资产市场, 代码资源共享,包含组件、编辑区块、静态区块、搜索业务组件、插件、场景搭建编辑器。

工作台安装方式:

# 全局安装
$ 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>

小伙伴可能会有点担心,这样低代码的工作台,是否可以满足各种不同的开发诉求呢?关于这个,sparrow提供多种不同类型的物料源,以此帮助用户提升研发效率。TJ君稍稍举例一些:

  • 组件:vue element-ui基础组件
  • 容器:存储基础组件
  • 编辑区块:可增删改的特定场景代码片段
  • 静态区块:代码片段
  • 搜索组件:官方内置拥有特定逻辑组件
  • 插件:第三方自定义组件

对实用性还持疑问的小伙伴可以看下下面这段实际使用动图:

作者也提供了一个线上体验版,和上面的演示效果保持一致,感兴趣的小伙伴可以先在线体验一把,再决定要不要下载完整的项目代码进行学习研究。

TJ觉得这个工作台既适合那些想开发但是本身编码能力一般的小伙伴,因为上手简单;也适合那些以学习为目标,研究实现方式的大夥伴,毕竟不是每个低代码的工作平台都开源。所以想使用一下、想学习一下的伙伴们!

扫描下方二维码,关注公众号“TJ君”,回复“低代码”,获取仓库地址!


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK