于react19+vite8+arco+zustand搭建后台管理模板【基础框架】

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

项目结构目录

使用最新vite8.0构建工具搭建项目框架，遵循 react19 hooks 语法编码开发。

react19-viteadmin基础网页后台系统同步更新到原创作品集，欢迎下载使用。

react19+arco+zustand网页版admin管理模板【基础版】

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