最新原创React19 + Vite8 + react-activation0.13.4 + Zustand5 + react-router-dom v7搭建轻量级Admin管理系统模板。
内置3种布局模板、浅色/暗黑模式、国际化、多级路由菜单、路由/状态管理、tabs标签栏、keepalive路由页面缓存、主题配色切换等功能。
项目知识点
react: ^19.2.7
react-dom: ^19.2.7
react-router-dom: ^7.18.0
@arco-design/web-react: ^2.66.15
zustand: ^5.0.14
react-activation: ^0.13.4
vite: ^8.1.0
sass: ^1.101.0
clsx: ^2.1.1
nprogress: ^0.2.0
项目特性
✨ 基于vite8.0构建工具vite^8.0.16搭建项目框架
🚀 最新前端技术栈react19 hooks、zustand5、react-router v7、sass
🌍 内置明亮/暗黑模式一键切换，支持多语言（i18n）动态切换
🧩 内置3个模板布局风格
🧭 支持页面KeepAlive缓存机制
⚡ 支持动态路由鉴权验证
📚 支持tabs多标签页切换路由页面
🎨 优雅轻盈react组件库arco-design
项目结构框架
入口模板配置
import { useEffect, useMemo } from 'react'
import { HashRouter } from 'react-router-dom'
import { AliveScope } from 'react-activation'
// 通过 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 { useTitle } from '@/hooks/useTitle'
// 引入路由配置
import Router from './router'
function AppLoaded() {
const { config: { theme }, setMode, setTheme } = appStore()
// 设置网站标题
useTitle()
useEffect(() => {
setMode()
setTheme(theme)
}, [theme])
return (
<AuthRouter>
<Router />
</AuthRouter>
)
}
function App() {
const { lang } = appStore()
const locale = useMemo(() => {
switch(lang) {
case 'en':
return enUS
case 'zh-CN':
return zhCN
case 'zh-TW':
return zhTW
default:
return zhCN
}
}, [lang])
return (
<ConfigProvider locale={locale}>
<AliveScope>
<HashRouter>
<AppLoaded />
</HashRouter>
</AliveScope>
</ConfigProvider>
)
}
export default App
以上就是react19+arco搭建简约后台系统的一些分享，希望对大家有点帮助！
vite8-webos网页版os管理|Vue3+Vite8.0+ArcoDesign搭建pc端os桌面系统
最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
Vite8+DeepSeek网页版AI助手|vue3+arco本地web版ai流式打字问答系统
Flutter3.41+DeepSeek智能AI应用|flutter3+getx+dio流式ai对话app模板
Electron41+Vite8.0+DeepSeek桌面端AI助手|electron+vue3流式ai系统
Flutter3-MacOS桌面OS系统|flutter3.41+window_manager客户端OS模板
最新研发flutter3.41+bitsdojo_window+getx客户端仿微信聊天Exe应用
最新版uni-app+vue3+uv-ui跨三端仿微信app聊天应用【h5+小程序+app端】
