趁著國(guó)慶前夕整了一個(gè)vite4結(jié)合react18搭建后臺(tái)管理模板，搭配上字節(jié)團(tuán)隊(duì)react組件庫(kù)ArcoDesign，整體操作功能非常絲滑。目前功能支持多種模板布局、暗黑/亮色模式、國(guó)際化、權(quán)限驗(yàn)證、多級(jí)路由菜單、tabview標(biāo)簽欄快捷菜單、全屏控制等功能。極簡(jiǎn)非凡的布局界面、高定制化模塊，用心打造每一個(gè)功能。
技術(shù)棧版本
"@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"
項(xiàng)目中使用的UI組件庫(kù)arco.design是字節(jié)跳動(dòng)前端團(tuán)隊(duì)推出的一款react企業(yè)級(jí)pc端組件庫(kù)。
https://arco.design/
功能特性
- 使用vite4構(gòu)建工具vite^4.4.5
- 最新前端技術(shù)棧react18 hooks、zustand、react-router、sass
- 支持中文/英文/繁體多語(yǔ)言解決方案
- 支持動(dòng)態(tài)路由鑒權(quán)驗(yàn)證
- 支持路由tabsview控制切換路由頁(yè)面
- 內(nèi)置多個(gè)模板布局風(fēng)格
- 搭配輕盈react組件庫(kù)arco-design
- 低耦合高定制化模塊
項(xiàng)目結(jié)構(gòu)
采用標(biāo)準(zhǔn)的vite4 / react目錄結(jié)構(gòu)，遵循react18 hooks編碼開(kāi)發(fā)。
每一個(gè)模塊都是純手寫定制化開(kāi)發(fā)測(cè)試，打造不一樣的超簡(jiǎn)非凡后臺(tái)模板。整體運(yùn)行編譯非常極速順滑。
/** * 入口模板 * @author Hs */ import { useEffect } from 'react' import { HashRouter } from 'react-router-dom' // 通過(guò) ConfigProvider 組件實(shí)現(xiàn)國(guó)際化 import { ConfigProvider } from '@arco-design/web-react' // 引入語(yǔ)言包 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的一些簡(jiǎn)單分享介紹，如果小伙伴們有一些建議，歡迎留言討論哈~~
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-710244.html
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-710244.html
到了這里，關(guān)于基于react18+vite4+arco.design搭建極簡(jiǎn)版后臺(tái)管理模板的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
