[[435427]]

平日里大家編碼的時(shí)候肯定想著如何能提高自己的工作效率，那么一種方法肯定是提高自身的編碼水平，但是同時(shí)工欲善其事必先利其器，如果有一款好的工具，說(shuō)不定也能實(shí)現(xiàn)提升開(kāi)發(fā)效率。

今天TJ君要跟大家分享的就是這樣一款場(chǎng)景化低代碼（LowCode）搭建工作臺(tái)， sparrow ，通過(guò)簡(jiǎn)單的操作 實(shí)時(shí)輸出源代碼。

sparrow支持基于vue、element-ui組件庫(kù)的中后臺(tái)項(xiàng)目的輸出，目標(biāo)只有一個(gè)，那就是：

提升開(kāi)發(fā)效率！

用過(guò)之后就會(huì)發(fā)現(xiàn)，sparrow的優(yōu)勢(shì)主要體現(xiàn)在兩個(gè)方面：

1、使用方便，通過(guò)對(duì)擁有業(yè)務(wù)邏輯的代碼的組裝，可以完成函數(shù)級(jí)別的項(xiàng)目搭建，靠拖拉拽就可以，不需要太多手工編碼，最終生成可供開(kāi)發(fā)使用的源代碼。

2、可擴(kuò)展性，可以通過(guò)AST讀取組件源代碼，進(jìn)行組合，只要頁(yè)面的邏輯是可拆解的就可以任意組裝；

基于上述兩個(gè)方面，sparrow的特性可以總結(jié)為三個(gè)特點(diǎn)：

• 低代碼開(kāi)發(fā)， 快速生成可讀性強(qiáng)、vue element-ui組件庫(kù)的源代碼。
• 可視化開(kāi)發(fā)， 通過(guò)GUI生成頁(yè)面代碼源文件。
• 資產(chǎn)市場(chǎng)， 代碼資源共享，包含組件、編輯區(qū)塊、靜態(tài)區(qū)塊、搜索業(yè)務(wù)組件、插件、場(chǎng)景搭建編輯器。

工作臺(tái)安裝方式：

全局安裝

# 全局安裝 
$ npm install -g sparrow-code 
 
# 運(yùn)行 
$ sparrow 

項(xiàng)目?jī)?nèi)安裝

# 項(xiàng)目?jī)?nèi)安裝 
$ npm install sparrow-code -D 
 
# package.json 增加 sparrow 
"scripts": { 
  "sparrow": "sparrow start -m page" 
} 
 
# 項(xiàng)目?jī)?nèi)安裝GUI組件 
$ npm install @sparrow-vue/develop-ui -S 
 
# 項(xiàng)目?jī)?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> 

小伙伴可能會(huì)有點(diǎn)擔(dān)心，這樣低代碼的工作臺(tái)，是否可以滿足各種不同的開(kāi)發(fā)訴求呢？關(guān)于這個(gè)，sparrow提供多種不同類型的物料源，以此幫助用戶提升研發(fā)效率。TJ君稍稍舉例一些：

• 組件：vue element-ui基礎(chǔ)組件
• 容器：存儲(chǔ)基礎(chǔ)組件
• 編輯區(qū)塊：可增刪改的特定場(chǎng)景代碼片段
• 靜態(tài)區(qū)塊：代碼片段
• 搜索組件：官方內(nèi)置擁有特定邏輯組件
• 插件：第三方自定義組件

對(duì)實(shí)用性還持疑問(wèn)的小伙伴可以看下下面這段實(shí)際使用動(dòng)圖：

作者也提供了一個(gè)線上體驗(yàn)版，和上面的演示效果保持一致，感興趣的小伙伴可以先在線體驗(yàn)一把，再?zèng)Q定要不要下載完整的項(xiàng)目代碼進(jìn)行學(xué)習(xí)研究。

TJ覺(jué)得這個(gè)工作臺(tái)既適合那些想開(kāi)發(fā)但是本身編碼能力一般的小伙伴，因?yàn)樯鲜趾?jiǎn)單；也適合那些以學(xué)習(xí)為目標(biāo)，研究實(shí)現(xiàn)方式的大夥伴，畢竟不是每個(gè)低代碼的工作平臺(tái)都開(kāi)源。所以想使用一下、想學(xué)習(xí)一下的伙伴們！