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

趁着國慶前夕整了一個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的一些簡單分享介紹，如果小夥伴們有一些建議，歡迎留言討論哈~~