《GitHub精選》是我們分享GitHub中優(yōu)質(zhì)項(xiàng)目的欄目，包括技術(shù)、學(xué)習(xí)、實(shí)用與各種有趣的內(nèi)容。本期推薦的是一個(gè)場(chǎng)景化低代碼（LowCode）搭建工作臺(tái)——Sparrow。

Sparrow是一套場(chǎng)景化低代碼搭建頁(yè)面的工作臺(tái)，通過(guò)預(yù)置組件簡(jiǎn)單拖拉拽就能快速搭建頁(yè)面，制作完畢后即可在線(xiàn)調(diào)試即時(shí)體驗(yàn)，實(shí)時(shí)修改，頁(yè)面效果所見(jiàn)即所得，并且支持生成源代碼。

主要功能：

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

工作原理：

• 首先選擇場(chǎng)景編輯器（表單、表格、區(qū)塊等），場(chǎng)景編輯器渲染到頁(yè)面
• 通過(guò)特定場(chǎng)景編輯器選擇物料（組件、區(qū)塊），選擇動(dòng)作傳到服務(wù)器端
• 服務(wù)器端生成源代碼，輸出源代碼到預(yù)覽項(xiàng)目中
• 預(yù)覽項(xiàng)目通過(guò)webpack熱更新實(shí)時(shí)展示效果

安裝：

• 全局安裝

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

演示：

• 部分組件

• 操作

• 查看代碼

更多內(nèi)容請(qǐng)大家自行前往閱讀。

GitHub：https://github.com/sparrow-js/sparrow