一款功能強大的 admin 框架，很多複雜的業務元件、頁面模板都有，專業程度堪比付費的產品。
關於 SCUI Admin
SCUI Admin
是一箇中後臺管理系統的前端解決方案，俗稱 admin ui 框架，用於讓開發者搭建業務管理後臺，基於當前最新的 Vue3 和 Element Plus 實現。和一些包含後端開發的 admin 專案不一樣，SCUI Admin 是一個純前端的解決方案，無論後端使用什麼語言開發，都沒有限制。
SCUI admin 官網首頁
SCUI Admin 封裝了很多常用的業務元件，使用起來很簡單，一切從簡也是
SCUI
所追求的目標。
讓一切複雜的東西傻瓜化。
SCUI的宗旨
SCUI Admin 的技術特性
元件
多個獨家元件、業務模板
許可權
完整的鑑權體系和精準的許可權控制
佈局
提供多套佈局模式，滿足各種 UI 設計需求
API
完善的API管理，使用真實網路
MOCK
配置
統一的全域性配置和元件配置，支援 build 後配置熱更新
效能
在減少頻寬請求和前端算力上多次最佳化，並且持續著
其他
多功能檢視標籤、動態許可權選單、控制檯組態化、統一異常處理等
上手體驗感受
作為一個使用
Element UI
開發 admin 後臺多年的前端仔，得益於 Element 提供的專業優質的基礎元件，在實現業務需求的過程中雖然十分順利，但 Element 只提供了基礎元件，複雜操作的業務需求，仍然需要自己去寫。
登入頁
SCUI Admin 的最大特色是提供了很多專業的
複雜元件
和
頁面模板
，在開始使用前，我強烈建議各位先從官方的演示地址體驗這套系統，相信會和我有一樣的感受。
介面佈局平衡合理
很多
admin
系統都過度簡潔，實際上 admin 最核心的是功能強大和高效，管理者使用起來事半功倍，比如 SCUI Admin 的導航選單是多列式的，相比於摺疊式的選單，使用起來更直觀。從上到下
麵包屑導航
、多頁面管理標籤以及選單隱藏、主題切換等基本功能都做得很好。
SCUI admin 控制檯
複雜業務元件、頁面模板開箱即用
SCUI Admin 提供了很多複雜功能的業務元件，比如
表格選擇器
：由 select 元件深度改造的表格選擇器， 非常適用於大量資料選擇的場景
表單表格
：業務會有表單裡含有物件陣列的情況， 直接在表格進行增刪改操作， 並且支援聯動 form 表單的禁用屬性
分類篩選器
、
過濾器
等資料篩選元件
編輯器
：提供連 Element Plus 沒有提供的
富文字編輯器
和
程式碼編輯器
SCUI admin 表格選擇器
SCUI admin 表單表格
還有太多實用的元件了，這些元件自己實現起來，不僅開發成本大，而且很有可能是 shi 一般的體驗。
開發上手
由於是純前端的專案，看目錄結構就基本可以上手了。
專案目錄結構
┌── public # 靜態資源（不會被Webpack打包）├── src # 原始碼│ ├── api # 介面│ ├── assets # 靜態資源（會被打包）│ ├── components # 元件庫│ ├── config # 配置│ ├── directives # 自定義指令│ ├── layout # 框架佈局檢視│ ├── locales # 國際化文字│ ├── router # 路由表│ ├── store # VUEX狀態管理│ ├── style # 全域性樣式│ ├── utils # 全域性公用方法│ ├── views # 所有檢視│ ├── App。vue # 入口檢視│ └── main。js # 入口檔案├── 。editorconfig # 統一編輯器樣式├── babel。config。js # postcss 配置├── package。json # 包管理└── vue。config。js # vue-cli 配置
安裝和執行
# 克隆專案git clone https：//gitee。com/lolicode/scui。git# 進入專案目錄cd scui# 安裝依賴npm i# 啟動專案（開發模式）npm run serve
啟動完成後瀏覽器訪問 http：//localhost：2800，接下去可以熟悉一下或者進行業務開發步驟。官網文件展示了開發一個頁面的教程，很簡單：
建立路由表
建立API
建立檢視
模組抽離
SCUI Admin 提供了全面的業務開發解決方案，沒有支援
樹搖最佳化
這種自動最佳化的方式，如果不把沒有用到的功能依賴去掉，打包的體積會很大。 SCUI Admin 採用
Webpack
官方
splitChunks
分割模組來配置。
依賴分析
在打包完成後，會在 dist 根目錄下生成 report。html，可以檢視各個模組的體積分析，從而決定是否需要抽離。
免費開源說明
SCUI Admin 是一個採用 MIT 開源協議的 web 中後臺管理 UI 框架，基於
Vue3
和
Element Plus
開發，這兩個專案同樣也是免費開源的，任何公司和個人都可以免費下載使用，也可以用在商業專案上。
之前分享了很多 admin 框架，
SCUI Admin
絕對是眾多免費 admin 框架的翹楚，從元件的豐富和實用程度上，完全可以和同型別的付費產品相提並論，我的下一個 admin 就選 SCUI Admin 了。
關注我，持續分享高質量的免費開源、免費商用的資源。
↓↓點選檢視本次分享的網址。
SCUI Admin - 基於 Vue3 和 Element Plus 開發的 admin 前端 UI 框架，不僅免費開源，還有很多現成的業務元件、頁面模板｜那些免費的磚