场景化低代码（LowCode）搭建工作台

小半 • 2024年2月21日下午6:07 • 微信精选 • 阅读 339

Sparrow 是一套场景化低代码搭建页面的工作台，通过预置组件简单拖拉拽就能快速搭建页面，制作完毕后即可在线调试即时体验，实时修改，页面效果所见即所得，并且支持生成源代码。

特性

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

优势

sprarrow 的核心目标是“提效”，因此功能上不只是单纯 UI 的可视化搭建，目前提供函数级别的搭建，提供拥有业务逻辑的代码组装，生成可二次开发的源代码；
易于扩展，通过 AST 读取组件源代码，进行组合，只要页面的逻辑是可拆解的就可以任意组装；
可与项目结合，技术上采用本地运行 server 服务，可以与项目深度结合，实现更多提效手段，更大可操作空间；

工作原理

首先选择场景编辑器（表单、表格、区块等），场景编辑器渲染到页面
通过特定场景编辑器选择物料（组件、区块），选择动作传到服务器端
服务器端生成源代码，输出源代码到预览项目中
预览项目通过 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>