趁著國慶前夕整了一個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端組件庫。
功能特性
- 使用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)