款功能強(qiáng)大的 admin 框架，很多復(fù)雜的業(yè)務(wù)組件、頁面模板都有，專業(yè)程度堪比付費(fèi)的產(chǎn)品。

關(guān)于 SCUI Admin

SCUI Admin 是一個中后臺管理系統(tǒng)的前端解決方案，俗稱 admin ui 框架，用于讓開發(fā)者搭建業(yè)務(wù)管理后臺，基于當(dāng)前最新的 Vue3 和 Element Plus 實(shí)現(xiàn)。和一些包含后端開發(fā)的 admin 項(xiàng)目不一樣，SCUI Admin 是一個純前端的解決方案，無論后端使用什么語言開發(fā)，都沒有限制。

SCUI Admin 封裝了很多常用的業(yè)務(wù)組件，使用起來很簡單，一切從簡也是 SCUI 所追求的目標(biāo)。

讓一切復(fù)雜的東西傻瓜化。

SCUI的宗旨

SCUI Admin 的技術(shù)特性

• 組件 多個獨(dú)家組件、業(yè)務(wù)模板
• 權(quán)限 完整的鑒權(quán)體系和精準(zhǔn)的權(quán)限控制
• 布局 提供多套布局模式，滿足各種 UI 設(shè)計(jì)需求
• API 完善的API管理，使用真實(shí)網(wǎng)絡(luò) MOCK
• 配置 統(tǒng)一的全局配置和組件配置，支持 build 后配置熱更新
• 性能 在減少帶寬請求和前端算力上多次優(yōu)化，并且持續(xù)著
• 其他 多功能視圖標(biāo)簽、動態(tài)權(quán)限菜單、控制臺組態(tài)化、統(tǒng)一異常處理等

上手體驗(yàn)感受

作為一個使用 Element UI 開發(fā) admin 后臺多年的前端仔，得益于 Element 提供的專業(yè)優(yōu)質(zhì)的基礎(chǔ)組件，在實(shí)現(xiàn)業(yè)務(wù)需求的過程中雖然十分順利，但 Element 只提供了基礎(chǔ)組件，復(fù)雜操作的業(yè)務(wù)需求，仍然需要自己去寫。

SCUI Admin 的最大特色是提供了很多專業(yè)的復(fù)雜組件和頁面模板，在開始使用前，我強(qiáng)烈建議各位先從官方的演示地址體驗(yàn)這套系統(tǒng)，相信會和我有一樣的感受。

界面布局平衡合理

很多 admin 系統(tǒng)都過度簡潔，實(shí)際上 admin 最核心的是功能強(qiáng)大和高效，管理者使用起來事半功倍，比如 SCUI Admin 的導(dǎo)航菜單是多列式的，相比于折疊式的菜單，使用起來更直觀。從上到下面包屑導(dǎo)航、多頁面管理標(biāo)簽以及菜單隱藏、主題切換等基本功能都做得很好。

復(fù)雜業(yè)務(wù)組件、頁面模板開箱即用

SCUI Admin 提供了很多復(fù)雜功能的業(yè)務(wù)組件，比如

• 表格選擇器：由 select 組件深度改造的表格選擇器, 非常適用于大量數(shù)據(jù)選擇的場景
• 表單表格：業(yè)務(wù)會有表單里含有對象數(shù)組的情況, 直接在表格進(jìn)行增刪改操作, 并且支持聯(lián)動 form 表單的禁用屬性
• 分類篩選器、過濾器等數(shù)據(jù)篩選組件
• 編輯器：提供連 Element Plus 沒有提供的富文本編輯器和代碼編輯器

還有太多實(shí)用的組件了，這些組件自己實(shí)現(xiàn)起來，不僅開發(fā)成本大，而且很有可能是 shi 一般的體驗(yàn)。

開發(fā)上手

由于是純前端的項(xiàng)目，看目錄結(jié)構(gòu)就基本可以上手了。

項(xiàng)目目錄結(jié)構(gòu)

┌── public				# 靜態(tài)資源(不會被Webpack打包)
├── src					# 源代碼
│	├── api				# 接口
│	├── assets			# 靜態(tài)資源(會被打包)
│	├── components		# 組件庫
│	├── config			# 配置
│	├── directives		# 自定義指令
│	├── layout			# 框架布局視圖
│	├── locales			# 國際化文本
│	├── router			# 路由表
│	├── store			# VUEX狀態(tài)管理
│	├── style			# 全局樣式
│	├── utils			# 全局公用方法
│	├── views			# 所有視圖
│	├── App.vue			# 入口視圖
│	└── main.js			# 入口文件
├── .editorconfig		# 統(tǒng)一編輯器樣式
├── babel.config.js		# postcss 配置
├── package.json		# 包管理
└── vue.config.js		# vue-cli 配置

安裝和運(yùn)行

# 克隆項(xiàng)目
git clone https://gitee.com/lolicode/scui.git

# 進(jìn)入項(xiàng)目目錄
cd scui

# 安裝依賴
npm i

# 啟動項(xiàng)目(開發(fā)模式)
npm run serve

啟動完成后瀏覽器訪問 http://localhost:2800，接下去可以熟悉一下或者進(jìn)行業(yè)務(wù)開發(fā)步驟。官網(wǎng)文檔展示了開發(fā)一個頁面的教程，很簡單：

1. 建立路由表
2. 建立API
3. 建立視圖

模塊抽離

SCUI Admin 提供了全面的業(yè)務(wù)開發(fā)解決方案，沒有支持樹搖優(yōu)化這種自動優(yōu)化的方式，如果不把沒有用到的功能依賴去掉，打包的體積會很大。 SCUI Admin 采用 Webpack 官方 splitChunks 分割模塊來配置。

依賴分析

在打包完成后，會在 dist 根目錄下生成 report.html，可以查看各個模塊的體積分析，從而決定是否需要抽離。

免費(fèi)開源說明

SCUI Admin 是一個采用 MIT 開源協(xié)議的 web 中后臺管理 UI 框架，基于 Vue3 和 Element Plus 開發(fā)，這兩個項(xiàng)目同樣也是免費(fèi)開源的，任何公司和個人都可以免費(fèi)下載使用，也可以用在商業(yè)項(xiàng)目上。

之前分享了很多 admin 框架，SCUI Admin 絕對是眾多免費(fèi) admin 框架的翹楚，從組件的豐富和實(shí)用程度上，完全可以和同類型的付費(fèi)產(chǎn)品相提并論，我的下一個 admin 就選 SCUI Admin 了。

關(guān)注我，持續(xù)分享高質(zhì)量的免費(fèi)開源、免費(fèi)商用的資源。

↓↓點(diǎn)擊查看本次分享的網(wǎng)址。

SCUI Admin - 基于 Vue3 和 Element Plus 開發(fā)的 admin 前端 UI 框架，不僅免費(fèi)開源，還有很多現(xiàn)成的業(yè)務(wù)組件、頁面模板｜那些免費(fèi)的磚

家早上好，今天給大家分享幾個GitHub上一些比較實(shí)用的開源工具，今天稍作整理，簡單跟大家分享一下。

1. SVG 矢量圖轉(zhuǎn)換工具；
2. 輕量級 Web 繪畫 App；
3. 首個開源的 UI 設(shè)計(jì)與原型制作平臺；
4. 私有云文檔在線部署工具；
5. DevOps 開發(fā)工具；
6. 零代碼爬蟲平臺。

SVG 矢量圖轉(zhuǎn)換

VTracer 是 GitHub 上一款開源工具，可快速將 JPG、PNG 等格式的圖片快速轉(zhuǎn)換為 SVG 矢量圖，并支持過濾斑點(diǎn)、色彩精度、曲線擬合等多種參數(shù)配置。

在線體驗(yàn)：https://www.visioncortex.org/vtracer/

GitHub：https://github.com/visioncortex/vtracer

輕量級 Web 繪畫 App

tldraw 是一個輕量級，功能強(qiáng)大的繪畫 App，自帶畫筆、橡皮、線框、文字等工具，用戶可自定義畫筆顏色、線框樣式等。

除了滿足基本繪畫需求之外，該工具還支持創(chuàng)建多人繪畫房間，快捷鍵作畫，以及暗黑主題、創(chuàng)作專注模式、畫布調(diào)試模式、畫布復(fù)制為 SVG / JSON 格式等功能。

Demo：https://www.tldraw.com/

GitHub：https://github.com/tldraw/tldraw

UI 設(shè)計(jì)與原型制作平臺

GitHub 上首個開源的 UI 設(shè)計(jì)與原型制作平臺：Penpot，擁有多款 UI 組件與樣式、交互式原型以及項(xiàng)目設(shè)計(jì)示例與模板，幫你更快完成項(xiàng)目設(shè)計(jì)工作。

此外，該平臺還支持團(tuán)隊(duì)多人實(shí)時協(xié)作編輯，設(shè)計(jì)稿添加注釋等多種團(tuán)隊(duì)協(xié)作工具。

，時長01:56

地址：https://penpot.app/

GitHub：https://github.com/penpot/penpot

私有云文檔在線部署

MrDoc 是一個開源的在線文檔系統(tǒng)，適合作為私有云文檔、云筆記和知識管理工具，私有化在線文檔部署方案。

該系統(tǒng)擁有站點(diǎn)管理（注冊登錄、資源管理、站點(diǎn)統(tǒng)計(jì)）、文檔管理、內(nèi)容編輯、音視頻內(nèi)容管理、私密文檔分享等功能。

該項(xiàng)目適用于個人云筆記、在線產(chǎn)品手冊、團(tuán)隊(duì)內(nèi)部知識庫、在線電子教程等私有化文檔部署場景。

地址：https://mrdoc.pro/

GitHub：https://github.com/zmister2016/MrDoc

DevOps 開發(fā)工具

GitHub 上一款開源的 DevOps 開發(fā)工具：Dev Lake，可將 DevOps 數(shù)據(jù)以實(shí)用、個性化、可擴(kuò)展的視圖呈現(xiàn)，完成數(shù)據(jù)的收集、分析和可視化。

工具內(nèi)置 20+ 效能指標(biāo)與下鉆分析能力，可快速歸集 DevOps 全流程效能數(shù)據(jù)，并支持接入新數(shù)據(jù)源，完成自定義 SQL 分析及拖拽搭建場景化數(shù)據(jù)視圖等功能。

項(xiàng)目團(tuán)隊(duì)成員主要來自微軟研究員、加州大學(xué)伯克利分校和斯坦福大學(xué)。

GitHub：https://github.com/merico-dev/lake

零代碼爬蟲平臺

Spider Flow，一個高度靈活可配置的爬蟲平臺，用戶無需編寫代碼，以流程圖的方式，即可實(shí)現(xiàn)爬蟲。

該工具支持多數(shù)據(jù)源、自動保存至數(shù)據(jù)庫、任務(wù)監(jiān)控、抓取 JS 動態(tài)渲染頁面、插件擴(kuò)展（OCR 識別、郵件發(fā)送）等功能。

GitHub：https://github.com/ssssssss-team/spider-flow

原文：https://mp.weixin.qq.com/s/xngXz6n2ODcWBoOnDE_zTA

歡迎點(diǎn)贊+轉(zhuǎn)發(fā)+關(guān)注！大家的支持是我分享最大的動力！！！