Vite8-Vue3Admin：一套代码，Element Plus / Naive UI / Arco 三版通吃

原创

xiaoyan2018

发布于 2026-10-28 23:40:41

1820

文章被收录于专栏：前端进阶实战前端进阶实战

爆肝一周！自研 Vite8 + Vue3.5 清爽型通用后台模板，支持三套 UI 版本，开箱即用！

项目特征

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

项目技术栈

分类	技术/依赖	版本	说明
🛠 开发工具	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 预处理器，支持变量、嵌套、混合等特性

项目框架结构

vite-vue3-admin布局模板

<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>

经典布局结构

<script setup>
  import { appState } from '@/pinia/modules/app'

  import Toolbar from '@/layouts/components/toolbar/index.vue'
  import Sidebar from '@/layouts/components/sidebar/index.vue'
  import Menus from '@/layouts/components/menus/index.vue'
  import Breadcrumb from '@/layouts/components/Breadcrumb.vue'
  import Tabview from '@/layouts/components/Tabview.vue'
  import Main from '@/layouts/components/Main.vue'

  const appstate = appState()
</script>

<template>
  <div class="vuadmin__layout flexbox flex-col">
    <Toolbar />

    <div class="vuadmin__layout-body flex1 flexbox">
      <!-- 侧边栏 -->
      <div class="vuadmin__layout-sidebar">
        <Sidebar />
      </div>

      <!-- 菜单栏 -->
      <div class="vuadmin__layout-menus" :class="{'hidden': appstate.config.collapsed}">
        <a-scrollbar>
          <Menus :rootRouteEnable="false" />
        </a-scrollbar>
      </div>

      <!-- 右侧主内容区 -->
      <div class="vuadmin__layout-main flex1 flexbox flex-col">
        <!-- 面包屑导航 -->
        <Breadcrumb />

        <!-- 标签页 -->
        <Tabview />

        <!-- 内容区 -->
        <Main />
      </div>
    </div>
  </div>
</template>