爆肝一周研发vite8.0+vue3+pinia3+naive-ui+echarts搭建一款web版轻量级中后台管理系统解决方案。
全新原创Vue3+Vite8+Arco优雅个人管理系统解决方案 - Arco版
vite8-naive-admin支持亮色+暗黑主题，提供4种常用布局模板，国际化、路由/状态管理、页面缓存、面包屑/标签栏导航，包含图表/表格/表单/权限/错误处理等常用业务模块。
vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
技术栈
- 编辑器：Vscode
- 前端技术框架：vite^8.0.16+vue^3.5.35+vue-router^5.1.0
- UI组件库：naive-ui^2.44.1
- 状态管理：pinia^3.0.4
- 本地存储：pinia-plugin-persistedstate^4.7.1
- 国际化配置：vue-i18n^11.4.5
- 图表组件：echarts^6.1.0
- markdown编辑器：md-editor-v3^6.5.1
- 模拟数据：mockjs^1.1.0
- 样式管理：sass^1.100.0
功能性
✅ 支持亮色+暗黑两种主题
✅ 内置4种布局模式（经典+分栏+纵向+横向）
✅ vue-i18n国际化多语言（中英文/繁体）
✅ 面包屑导航/标签栏页面缓存
✅ 支持路由配置多级菜单/收缩侧边栏
✅ 全屏/侧边抽屉设置
✅ 整合图表/表格/表单/动态权限/错误处理等业务模块
✅ 清爽简约界面、可自行扩展布局模板
项目结构框架
最新自研Vue3+Vite8.0+NaiveUI高颜值Web版后台管理系统 - bilibili
入口配置main.js
import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'
// 引入插件配置
import Plugins from './plugins'
createApp(App)
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')
公共布局模板
支持4种通用布局模板。也可以根据需要自己去自定义布局模板。
<script setup>
import { appState } from '@/pinia/modules/app'
// 引入布局模板
import Classic from './template/classic/index.vue'
import Columns from './template/columns/index.vue'
import Vertical from './template/vertical/index.vue'
import Horizontal from './template/horizontal/index.vue'
const appstate = appState()
const LayoutMap = {
'classic': Classic,
'columns': Columns,
'vertical': Vertical,
'horizontal': Horizontal
}
</script>
<template>
<div class="vuadmin__container">
<component :is="LayoutMap[appstate.config.layout]" />
</div>
</template>
自定义标签栏菜单
支持滚动、右键菜单、内容全屏、刷新页面、下拉菜单。
整个项目涉及到的知识点还是非常多，希望以上分享对大家有点帮助~
👉 点赞 + 转发 + 收藏 👈
你的支持是我持续爆肝最新实战项目的原动力！
基于electron38+vite7+vue3 setup+elementPlus电脑端仿微信/QQ聊天软件
最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序
Flutter3-MacOS桌面OS系统|flutter3.41+window_manager客户端OS模板
electron38.2-vue3os系统|Vite7+Electron38+Pinia3+Arco桌面版OS后台管理
爆肝flutter3.41+dart3.11+getx+dio仿写deepseek智能ai应用app
Flutter3.41实战微信桌面端聊天程序|flutter3仿微信客户端Exe聊天室
Flutter3.41+Dart3.11从0-1纯手撸微信聊天APP原生应用
自研tauri2.0+vite6.x+vue3+rust+arco-design桌面版os管理系统Tauri2-ViteOS
2026实战uniapp+vue3+mphtml调用deepseek【小程序+安卓+H5】流式输出ai
vite8.0-webai网页版AI模板|vue3+vite8+deepseek专属web版流式ai回答助手
Electron41 + Vite8 + Vue3.5实战打造你的专属AI回答助手
2026最新款Tauri2.10+Vite7.3+DeepSeek桌面版AI系统Exe
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
基于uni-app+vue3+uvui跨三端仿微信app聊天模板【h5+小程序+app】 基于uniapp+vue3+uvue短视频+聊天+直播app系统
