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

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

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

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

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

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

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

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

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

工作臺安裝方式：

全局安裝

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

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

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

對實(shí)用性還持疑問的小伙伴可以看下下面這段實(shí)際使用動圖：

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

TJ君覺得這個(gè)工作臺既適合那些想開發(fā)但是本身編碼能力一般的小伙伴，因?yàn)樯鲜趾唵危灰策m合那些以學(xué)習(xí)為目標(biāo)，研究實(shí)現(xiàn)方式的大夥伴，畢竟不是每個(gè)低代碼的工作平臺都開源。所以想使用一下、想學(xué)習(xí)一下的伙伴們，關(guān)注我，私信“低代碼”，獲取下載地址哦～