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

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

主要功能：

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

工作原理：

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

安裝：

• 全局安裝

# 全局安裝$ npm install -g sparrow-code# 運行$ sparrow

• 項目內(nèi)安裝

# 項目內(nèi)安裝$ npm install sparrow-code -D# package.json 增加 sparrow"scripts": {"sparrow": "sparrow start -m page"}# 項目內(nèi)安裝GUI組件$ npm install @sparrow-vue/develop-ui -S# 項目內(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)容請大家自行前往閱讀。

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