场景化低代码 牛啊

推荐一个开源项目:Sparrow,这是一个功能强大的场景化低代码搭建工作台,只需要在这个工作台上进行组件的拖拉拽,就能实时输出可读性强、vue element-ui 组件库的源代码。

这个工作台类似于这样,包含组件、编辑区块、静态区块、搜索业务组件、插件、场景搭建编辑器。中间是预览区域,区域中的数据面板、账单详情都是通过右侧的组件拖过来的。

如果你想实现一个数据面板、表单、卡片的前端 UI,不需要 Coding,只需拖拉拽就能实时预览网页效果,然后点击左上角的代码按钮就能一键生成源码。

该开源项目有丰富的组件,包含容器、布局、卡片、表单、按钮、选择框等。

作者描述:“ sparrow 的核心目标只有一条提升研发效率 ”。

虽然这句话还有待商榷,但是这个低代码开源项目功能上不只是单纯 UI 的可视化搭建,目前提供了函数级别的搭建,提供拥有业务逻辑的代码组装,生成可二次开发的源代码。

而且可与项目结合,技术上采用本地运行 server 服务,可以与项目深度结合,实现更多提效手段,更大可操作空间;

全局安装

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