你还在从零搭建后台系统吗?试试这款最新研发的vite8.x+vue3+pinia3搭配element-plus、naive-ui、arco-design组件库构建中后台管理系统模板。

未标题-后台管理---element

未标题-后台管理--naive

未标题-后台管理---arco

功能特性

特性分类
功能清单
详细说明
🎨 UI 组件库​
多版本可选​
提供 ArcoDesign、Element Plus、Naive UI​ 三个版本,可按团队技术栈自由选择
🌗 主题模式​
亮色 + 暗黑主题​
内置双主题模式,支持一键切换,暗黑模式深度适配所有组件与业务页面
📐 布局系统​
4 种布局模式​
内置经典、分栏、纵向、横向四种布局,满足不同后台系统的导航习惯
🌍 国际化​
多语言支持​
集成 vue-i18n,内置中文、英文、繁体三种语言包,可快速扩展其他语种
🧭 导航体验​
面包屑 + 标签栏​
顶部面包屑导航 + 多标签页快捷切换,支持页面缓存,关闭标签不丢失操作状态
📂 菜单与导航​
多级菜单 + 侧边栏收缩​
路由配置驱动多级菜单,侧边栏支持完全收起/展开,提升内容区可视面积
⚙️ 系统与设置​
全屏 + 抽屉设置​
支持页面全屏展示,系统配置面板以侧边抽屉形式呼出,实时预览布局与主题变更
📦 业务模块​
开箱即用的业务套件​
整合图表、表格、表单、动态权限控制、错误处理等常见后台模块,降低开发成本
🧩 扩展能力​
优雅简约 + 可扩展​
界面设计简约克制,架构层面预留布局模板扩展点,方便自行定制专属布局

p3

项目技术栈

分类
技术/依赖
版本
说明
🛠 开发工具​
Visual Studio Code
-
推荐主力编辑器,配合 Volar 插件获得最佳 Vue3 开发体验
⚡ 核心框架​
Vite
^8.0.16
次世代前端构建工具,极速冷启动与热更新
 
Vue
^3.5.35
渐进式 JavaScript 框架,采用 Composition API
 
Vue Router
^5.1.0
官方路由管理器,支持动态路由与路由守卫
🎨 UI 组件库​
ArcoDesign
@arco-design/web-vue@^2.58.0
字节跳动出品的企业级设计系统,Vue3 版本组件丰富
🗄 状态管理​
Pinia
^3.0.4
Vue 官方推荐的状态管理库,轻量直观
 
pinia-plugin-persistedstate
^4.7.1
Pinia 持久化插件,基于 localStorage 自动同步状态
🌍 国际化​
Vue I18n
^11.4.5
Vue 官方国际化方案,支持多语言切换
📊 图表可视化​
ECharts
^6.1.0
百度开源的强大图表库,支持多种可视化需求
📝 编辑器​
md-editor-v3
^6.5.1
Vue3 Markdown 编辑器组件,支持实时预览
🎭 模拟数据​
Mock.js
^1.1.0
生成随机数据,拦截 Ajax 请求,便于前后端分离开发
🎨 样式预处理​
Sass
^1.100.0
CSS 预处理器,支持变量、嵌套、混合等特性

p1

image

image

image

项目框架结构

image

image

image

image

image

image

vite-vue3-admin布局模板

image

image



经典布局结构



image

image

image

image

image

image

image

image

image

image

image

爆肝一周!自研 Vite8 + Vue3.5 清爽型通用后台模板,支持三套 UI 版本。

适用场景

  • 中后台管理系统(CMS / OA / ERP / 数据平台)
  • 快速原型验证
  • 新手学习 Vue3 + Vite8 工程化
  • 多项目复用同一套骨架
这套模板的目标不是“功能堆满”,而是:
清爽、好改、不绑架业务、能直接写页面
Vite8 的极速冷启 + Vue3.5 的 Composition API + Pinia3 的简洁状态,
再配合三套 UI 版本与完整后台骨架。

如果对你有启发,欢迎点赞 / 收藏 / 转发

 


原文地址: https://www.cveoy.top/t/topic/qHP6 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录