基於react18+vite4+arco.design搭建極簡版後臺管理模板

来源:https://www.cnblogs.com/xiaoyan2017/archive/2023/09/28/17734786.html
-Advertisement-
Play Games

趁著國慶前夕整了一個vite4結合react18搭建後臺管理模板,搭配上位元組團隊react組件庫ArcoDesign,整體操作功能非常絲滑。目前功能支持多種模板佈局、暗黑/亮色模式、國際化、許可權驗證、多級路由菜單、tabview標簽欄快捷菜單、全屏控制等功能。極簡非凡的佈局界面、高定製化模塊,用心打 ...


趁著國慶前夕整了一個vite4結合react18搭建後臺管理模板,搭配上位元組團隊react組件庫ArcoDesign,整體操作功能非常絲滑。目前功能支持多種模板佈局、暗黑/亮色模式、國際化、許可權驗證、多級路由菜單、tabview標簽欄快捷菜單、全屏控制等功能。極簡非凡的佈局界面、高定製化模塊,用心打造每一個功能。

技術棧版本

"@arco-design/web-react": "^2.53.1",
"clsx": "^2.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"sass": "^1.67.0",
"zustand": "^4.4.1"
"vite": "^4.4.5"

項目中使用的UI組件庫arco.design是位元組跳動前端團隊推出的一款react企業級pc端組件庫。

https://arco.design/

功能特性

  • 使用vite4構建工具vite^4.4.5
  • 最新前端技術棧react18 hooks、zustand、react-router、sass
  • 支持中文/英文/繁體多語言解決方案
  • 支持動態路由鑒權驗證
  • 支持路由tabsview控制切換路由頁面
  • 內置多個模板佈局風格
  • 搭配輕盈react組件庫arco-design
  • 低耦合高定製化模塊

項目結構

採用標準的vite4 / react目錄結構,遵循react18 hooks編碼開發。

每一個模塊都是純手寫定製化開發測試,打造不一樣的超簡非凡後臺模板。整體運行編譯非常極速順滑。

/**
 * 入口模板
 * @author Hs
*/

import { useEffect } from 'react'
import { HashRouter } from 'react-router-dom'
// 通過 ConfigProvider 組件實現國際化
import { ConfigProvider } from '@arco-design/web-react'
// 引入語言包
import enUS from '@arco-design/web-react/es/locale/en-US'
import zhCN from '@arco-design/web-react/es/locale/zh-CN'
import zhTW from '@arco-design/web-react/es/locale/zh-TW'

import { AuthRouter } from '@/hooks/useRoutes'
import { appStore } from '@/store/app'

// 引入路由配置
import Router from './routers'

function App() {
    const { lang, config: { mode }, setTheme } = appStore()

    const getLocale = () => {
        switch(lang) {
            case 'en':
                return enUS
            case 'zh-CN':
                return zhCN
            case 'zh-TW':
                return zhTW
            default:
                return zhCN
        }
    }

    useEffect(() => {
        setTheme(mode)
    }, [])

    return (
        <ConfigProvider locale={getLocale()}>
            <HashRouter>
                <AuthRouter>
                    <Router />
                </AuthRouter>
            </HashRouter>
        </ConfigProvider>
    )
}

export default App

支持分欄、縱向、橫向三種佈局模板。

/**
 * 主佈局模板
 * @author Hs
*/

import { useMemo } from 'react'
import { appStore } from '@/store/app'

// 引入佈局模板
import Columns from './template/columns'
import Vertical from './template/vertical'
import Transverse from './template/transverse'

function Layout() {
    const { config: { skin, layout } } = appStore()

    // 佈局模板
    const LayoutComponent = useMemo(() => {
        switch(layout) {
            case 'columns':
                return Columns
            case 'vertical':
                return Vertical
            case 'transverse':
                return Transverse
            default:
                return Columns
        }
    }, [layout])
    
    return (
        <div className="radmin__container">
            <LayoutComponent />
        </div>
    )
}

export default Layout

以上就是react-vite-admin的一些簡單分享介紹,如果小伙伴們有一些建議,歡迎留言討論哈~~

 

本文為博主原創文章,未經博主允許不得轉載,歡迎大家一起交流 QQ(282310962) wx(xy190310)
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 問題現象: 使用伺服器管理器打開本地安全策略,或使用win+R快捷鍵,輸入gpedit.msc打開系統組策略時,出現報錯:無法打開此電腦上的組策略對象。你可能沒有相應的許可權。 解決方法: 1、使用win+E快捷鍵打開資源管理器,點擊”查看“,勾選”隱藏的項目“,因為C:\Windows\Syste ...
  • 一、介紹說明 Linux系統是一個多用戶多任務的操作系統,任何一個要使用系統資源的用戶,都必須首先向系統管理員申請一個賬號,然後以這個賬號的身份進入系統。 用戶的賬號一方面可以幫助系統管理員對使用系統的用戶進行跟蹤,並控制他們對系統資源的訪問;另一方面也可以幫助用戶組織文件,併為用戶提供安全性保護。 ...
  • PostgreSQL 在開源資料庫世界中一直是一個標誌性的存在。經過35年的嚴格開發,它以其可靠性、強大的功能和性能而自豪。DB-engines 的突出顯示,其市場份額的增長證明瞭其適應性強的數據模型和滿足各種用例需求的多樣化擴展 考慮到PG突出的地位,甲骨文將推出基於 PostgreSQL 14. ...
  • 在資料庫代理層中,寫節點的資料庫連接是一種很重要和稀缺的資源,提升其利用率是一個提升資料庫整體性能的重要手段。資料庫連接占用過高會大幅增加資料庫的資源負擔,降低資料庫的處理能力。通過延遲啟動的事務,可以減少不必要的連接占用時長,提升資料庫連接利用率。 ...
  • SQL改寫是資料庫產品中使用比較頻繁的一個技術,在大多數產品中的調用頻率也非常高,通常對性能的需求需要接近對應資料庫產品的上限。例如在天翼雲關係型資料庫中的Mysql語法相容組件,其性能測試標準需要達到接近30萬TPS,也意味著SQL改寫環節的性能標準需要支持至少每秒30萬次以上,否則會成為系統的性... ...
  • MySQL InnoDB的索引統計信息在什麼時候更新呢? 或者說什麼事件會觸發InnoDB索引的統計信息更新呢?下麵結合參考資料When Does InnoDB Update the Index Statistics? (Doc ID 1463718.1)[1]簡單總結梳理一下(文中大部分知識點來自 ...
  • 本文分享自華為雲社區 《實戰指南,SpringBoot + Mybatis 如何對接多數據源》,作者:戰斧。 在我們開發一些具有綜合功能的項目時,往往會碰到一種情況,需要同時連接多個資料庫,這個時候就需要用到多數據源的設計。而Spring與Myabtis其實做了多數據源的適配,只需少許改動即可對接多 ...
  • 近日,天翼雲與神州信息完成神州信息銀行分散式核心系統與天翼雲4.0雲平臺及TeleDB資料庫的適配認證工作,標志著雙方聯合推出的“銀行核心業務系統聯合解決方案”生產環境投產成功。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...