介紹
sparrow-js 是場景化低代碼（LowCode）搭建工作臺，通過操作場景化編輯器生成源代碼，側(cè)重于支持日常業(yè)務(wù)需求開發(fā)的效率提示，核心目標(biāo)僅有一條“提生研發(fā)效率”，目前提供基于vue、element-ui組件庫中后臺項(xiàng)目的方案。主要具備以下功能：
- 低代碼開發(fā)， 快速生成可讀性強(qiáng)、vue element-ui組件庫的源代碼。
- 可視化開發(fā)， 通過GUI生成頁面代碼源文件。
- 資產(chǎn)市場， 代碼資源共享，包含組件、編輯區(qū)塊、靜態(tài)區(qū)塊、搜索業(yè)務(wù)組件、插件、場景搭建編輯器。
優(yōu)勢
sprarrow 的核心目標(biāo)是“提效”，因此功能上不只是單純UI的可視化搭建，目前提供函數(shù)級別的搭建，提供擁有業(yè)務(wù)邏輯的代碼組裝，生成可二次開發(fā)的源代碼；
易于擴(kuò)展，通過AST讀取組件源代碼，進(jìn)行組合，只要頁面的邏輯是可拆解的就可以任意組裝；
可與項(xiàng)目結(jié)合，技術(shù)上采用本地運(yùn)行server服務(wù)，可以與項(xiàng)目深度結(jié)合，實(shí)現(xiàn)更多提效手段，更大可操作空間；
目錄結(jié)構(gòu)
├── README.md
├── sparrow // sparrow 核心功能，包括可視化搭建、生成源代碼服務(wù)
│?? ├── package.json
│?? └── packages
├── sparrow-vue-develop // 項(xiàng)目內(nèi)安裝界面
│?? ├── babel.config.js
│?? ├── package.json
│?? ├── public
│?? ├── src
│?? └── vue.config.js
├── sparrow-vue-site // 文檔站點(diǎn)
│?? ├── deploy.sh
│?? ├── docs
│?? └── package.json
└── vue-market // 資產(chǎn)市場
????├── blocks
????├── boxs????└── components結(jié)構(gòu)
工作原理
首先選擇場景編輯器（表單、表格、區(qū)塊等），場景編輯器渲染到頁面；
通過特定場景編輯器選擇物料（組件、區(qū)塊），選擇動作傳到服務(wù)器端；
服務(wù)器端生成源代碼，輸出源代碼到預(yù)覽項(xiàng)目中；
-
預(yù)覽項(xiàng)目通過webpack熱更新實(shí)時(shí)展示效果；
全局安裝
#?全局安裝
$?npm?install?-g?sparrow-code
#?運(yùn)行
$?sparrow項(xiàng)目內(nèi)安裝
#?項(xiàng)目內(nèi)安裝
$?npm?install?sparrow-code?-D
#?package.json?增加?sparrow
"scripts":?{
??"sparrow":?"sparrow?start?-m?page"
}
#?項(xiàng)目內(nèi)安裝GUI組件
$?npm?install?@sparrow-vue/develop-ui?-S
#?項(xiàng)目內(nèi)引用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>
項(xiàng)目預(yù)覽圖
點(diǎn)擊下方卡片/微信搜索，關(guān)注公眾號“天宇文創(chuàng)意樂派”(ID:gh_cc865e4c536b)
回復(fù)“sparrow”獲取倉庫地址
本文使用 文章同步助手 同步
