基于 Vite 构建,使用 React 与 JavaScript 开发
arco-admin-template — Vite 后台模板
作者 hu-snail
基于 Vite 与 React 的中后台前端模板,集成 Arco Design、react-router-dom v6、mockjs 与 less,提供国际化、主题定制和暗色模式。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
目前有 1 张原始预览,可打开完整图片查看设计细节。
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
UI 采用 Arco Design,路由使用 react-router-dom v6
内置 mockjs 模拟数据方案,样式使用 less
支持国际化与可自定义主题
提供亮色/暗色模式切换
包含登录、仪表盘、资源、组件示例、设置与 404 等页面
模板详细介绍
arco-admin-template 是一个开源的中后台前端模板,采用 Vite 构建,使用 React 与 JavaScript 编写,UI 层基于 Arco Design,路由使用 react-router-dom v6,样式使用 less,并内置 mockjs 提供模拟数据。模板包含登录页、仪表盘、资源页、按钮组件示例、设置页和 404 页面等界面,支持国际化方案、可自定义主题以及亮色/暗色切换。
项目 README 说明其目的偏向学习:练习 React Hook 相关 API、掌握 Vite 插件机制与构建配置、了解 react-router-dom v6 的新特性。文档标注为“正在编写中”,因此使用前需要自行阅读源码了解目录结构与配置方式。
运行环境方面,README 建议 Node 版本不低于 12.0.0,本地开发推荐使用 Chrome 80+,支持现代浏览器但不支持 IE。仓库采用 MIT 许可,可免费使用、修改、商用和分发该版本代码,分发时需保留版权声明与许可声明;演示图片、字体、图标等第三方素材需单独核对其许可。
适合你的项目吗?
适用场景
- 搭建中后台管理系统的前端基础工程
- 学习 React Hook、Vite 构建配置与 react-router-dom v6 用法
- 作为需要国际化或暗色模式的后台界面起点
- 在无后端接口时借助 mockjs 先行开发页面
适合人群
- 需要 React 中后台模板的前端开发者
- 希望参考 Vite 与 Arco Design 组合用法的学习者
- 计划在模板基础上二次开发后台界面的团队
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
README 建议 Node 版本 >= 12.0.0,本地开发推荐 Chrome 80+,不支持 IE
- 2
安装依赖使用 yarn install,开发运行 yarn dev,打包 yarn build,本地预览 yarn preview
- 3
项目文档标注为正在编写中,需结合源码了解具体配置
- 4
演示图片、字体、图标等第三方素材需按各自许可核对
- 5
分发代码副本或实质性部分时,需保留原作者版权声明和完整 MIT 许可声明
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 浏览器兼容性限制:不支持 IE,本地开发推荐 Chrome 80+,仅支持现代浏览器。
- 项目文档尚未完成,README 标注“正在编写中”,使用前需自行阅读源码了解目录结构与配置方式。
- README 含捐赠请求,属自愿性质,不影响代码的免费使用。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
本地开发推荐使用`Chrome 80+` 浏览器 支持现代浏览器, 不支持 IE
README 原文
## 文档 正在编写中......
README 原文
https://github.com/hu-snail/arco-admin-template/blob/master/LICENSEhttps://github.com/hu-snail/arco-admin-template/blob/master/README.md如果你觉得这个项目对你有帮助,你可以帮作者买一杯咖啡表示支持!
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-30。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 77 / 100
- 技术栈
- Vite · React
- 网站类型
- 后台
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2022-05-06
- 截图检查日期
- 2026-09-30
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Vite。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 6fc17c22d3ea5f58f85c55a12a8d8b0d392d432a3eec29e3894a12110b68f634
2026-09-30T09:33:55.732Z
来源文件 / 仓库<div align="center"><img height="120px" src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/logo/logo.svg"/></div> <h1 align="center">Arco admin template</h1> ## 简介 `Arco-admin-template`是一个免费开源的中后台模板你,使用了`React17`、`vite2`、`react-router-dom v6`、`less` 等主流技术开发,开箱即用的中后台前端解决方案。 项目目的: - 学习`React Hook`相关 Api - 掌握`Vite2`插件机制、构建配置 - 学习 `Ract-router-dom v6`新特性 ## 特性 - 技术栈:React17/React-router-dom v6/vite2 - Javascript 版本 - 可自定义主题 - 国际化方案 - Mock 数据方案 - 暗夜模式 - Arco Design UI 库 ## 文档 正在编写中...... ## 准备 - `Node`: 版本建议 >= 12.0.0 [下载链接](https://nodejs.org/zh-cn/download/) - `Git`: [版本管理工具](https://www.git-scm.com/download) - `Visual Studio Code`: [最新版本](https://code.visualstudio.com/Download/) - [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)- 脚本代码检查 - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - 代码格式化 - [Stylelin](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint) - css 格式化 ## 安装使用 - 获取代码 ```sh git clone https://github.com/hu-snail/arco-admin-template.git ``` - 安装依赖 ```sh yarn install ``` - 运行 ```sh yarn dev ``` - 打包 ```sh yarn build ``` - 本地预览 ```sh yarn preview ``` ## 预览截图 - 登录页 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/login.png"/> - 仪表盘 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/work.png"/> - 资源 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/res.png"/> - 按钮组件 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/comp-btn.png"/> - 设置 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/setting.png"/> - 404 <img src="https://github.com/hu-snail/arco-admin-template/blob/master/src/assets/screenshot/500.png"/> ## 浏览器支持 本地开发推荐使用`Chrome 80+` 浏览器 支持现代浏览器, 不支持 IE ## 维护者 [@hu-snail](https://github.com/hu-snail/) ## 捐赠 如果你觉得这个项目对你有帮助,你可以帮作者买一杯咖啡表示支持! <div style="display: flex; justify-content: space-between;"><img width="48%" src="https://gitee.com/hu-snail/vue3-admin-element-template/raw/master/src/assets/zfb.jpeg"/></div> ## License [MIT © hu-snail-2021](https://github.com/hu-snail/arco-admin-template/blob/master/LICENSE)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

kiaalap
Free admin dashboard template focused on education, online course and school management. Build using Bootstrap…
Vite · 后台

react-vite-admin
This Starter utilizes React, Recoil, React Query, React Hooks, Typescript, Axios And Vite. 全新技术栈的后台管理系统
Vite · 后台

admin-antd-react
React + Ant Design Admin template
Vite · 后台

super-admin
React Admin template with multiple cached tabs 🔨... 管理后台多tab缓存标签页解决方案,正在建设中 🔨...
Vite · 后台

react-vite-tailwind-typescript-firebase-auth-template
Good starting point for your next application with React.JS, TypeScript, TailwindCSS, Firebase Auth and Vite.
Vite · 后台

saasboard
Free and open-source SaaS dashboard template for startups, businesses, and AI Tools. | Built with Meku, React,…
Vite · 后台
