簡介
Soybean Admin 是一個基于 Vue3、Vite3、TypeScript、NaiveUI、Pinia 和 UnoCSS 的清新優雅的中背景模版，它使用了最新的前端技術棧，内置豐富的主題配置，有着極高的代碼規範，基于 mock 實作的動态權限路由，開箱即用的中背景前端解決方案，也可用于學習參考。
特性
- 最新技術棧： 使用 Vue3/vite2 等前端前沿技術開發, 使用高效率的 npm 包管理器 pnpm
- TypeScript: 應用程式級 JavaScript 的語言
- 主題： 豐富可配置的主題、暗黑模式，基于原子 css 架構 - UnoCss 的動态主題顔色
- 代碼規範： 豐富的規範插件及極高的代碼規範
- 權限路由： 基于檔案的路由系統、基于 mock 的動态路由能快速實作後端動态路由
- 請求函數： 基于 axios 的完善的請求函數封裝，提供 Promise 和 hooks 兩種請求函數，加入請求結果資料轉換的擴充卡擴充卡
特性細節
技術棧：
Vue3 + Vite3 + TypeScript + NaiveUI + Pinia + UnoCss + Axios + ECharts + AntV G2 + @vueuse + iconify
嚴格的代碼規範：
- eslint + prettier + eslint-config-airbnb-base + eslint-plugin-vue + eslint-plugin-import + @typescript-eslint/eslint-plugin 等插件提供代碼全面的格式規範，eslintrc 的 import/order 規則規範了導入依賴的順序
- husky + lint-staged + vuetsc + commitlint + commitizen 保證了送出的代碼符合 eslint 規則和 TS 類型檢測，送出的内容規範遵循了 angular 送出規範
- 應用設計模式優化代碼：項目裡面多次用到政策模式替換 if else
- 所有頁面使用 script-setup 寫法，并遵循特定順序(用文檔規範)
- 目錄結構組織遵循特定規範，頁面的寫法嚴格遵循子產品思想，使得每個頁面的代碼結構清晰明了
權限路由：
- 根據檔案自動生成路由的類型和路由子產品資料
- 動态的路由資料由 mock 生成，前端添加動态路由
- 指定了 mock 路由的類型，友善快速對接後端
- 菜單由動态路由資料生成，支援隐藏指定菜單，支援多級菜單，支援外鍊打開
- 在多頁簽中的緩存的頁面會記錄滾動位置
- 面包屑資料由目前路由和菜單資料生成
主題：
- 支援各種主題顔色、暗黑模式和各種布局
- UnoCss 引入各種主題顔色，直接通過 class 即可應用對應的顔色
- 初始化加載适應主題顔色
- 支援項目 logo 自适應主題顔色
請求函數：基于 axios 封裝
- 請求執行個體： 可建立多個不同的 baseUrl 的請求執行個體
- 統一請求結果： 将錯誤資訊統一處理成特定格式，和請求成功的資料再按特定格式一起傳回
/** 自定義的請求成功結果 */
interface SuccessResult<T = any> {
/** 請求錯誤 */
error: null;
/** 請求資料 */
data: T;
}
/** 請求錯誤 */
interface RequestError {
/** 請求服務的錯誤類型 */
type: RequestErrorType;
/** 錯誤碼 */
code: string | number;
/** 錯誤資訊 */
msg: string;
}
/** 自定義的請求失敗結果 */
interface FailedResult {
/** 請求錯誤 */
error: RequestError;
/** 請求資料 */
data: null;
}
/** 自定義的請求結果 */
type RequestResult<T = any> = SuccessResult<T> | FailedResult;
- 錯誤提示： 智能提示錯誤，避免同一種錯誤在同一時間段顯示，通過指定錯誤碼不展示響應錯
- token 重新整理： 無感重新整理 token
- 請求參數轉換： 根據不同的 Content-Type 轉換資料，利用 qs 序列化資料，支援單檔案和多檔案上
封裝的請求函數支援 Promise 和 hooks 兩種, hooks 的請求函數包含 loading 狀态
自定義元件
布局元件soybean-admin-layout：
- 分為 header、tab、sider、content、footer 五個部分，除了 content，其餘都可以控制顯示隐藏，且可以自定義過度動畫
- 支援 vertical 和 horizontal 兩種模式，結合局部的現實隐藏，為該項目提供了 4 種布局模式
- 高性能元件，相比用 UI 元件建構的布局，該元件不用考慮很多因素，專注于目前的幾種布局模式
多頁簽元件soybean-admin-tab：ChromeTab 和 ButtonTab
- 支援主題顔色及暗黑模式
- ChromeTab 類似于浏覽器的标簽，樣式清新
- 結合 BetterScroll，實作多頁簽元件的左右滑鼠滑動(移動端左右觸摸滑動)，激活狀态的 Tab 自動居中
LoadingEmptyWrapper
- 支援現實加載狀态、空狀态和網絡狀态的元件
- 支援主題顔色及暗黑模式
- 圖檔文字大小通過屬性配置
項目示例圖
項目源碼
私信免費擷取，關鍵字【學習】