Vite8-Vue3-Admin网页版后台模板|vue3.5+arco+echarts后台管理系统

最新自研vue3.5+vite8+arco-design清爽型通用前端后台管理模板。

vite8-vue3admin：一款简约干净网页版admin管理系统解决方案。支持浅色+暗黑主题，提供4种常用布局模板，国际化、路由/状态管理、页面缓存、面包屑/标签栏导航，包含图表/表格/表单/权限/错误处理等常用业务模块。

electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统

Tauri2-Vite7Admin客户端管理后台|tauri2.9+vue3+element-plus后台系统

Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理

Tauri2.9+Vue3桌面版OS系统|vite7+tauri2+arcoDesign电脑端os后台模板

vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统

技术栈

• 编辑器：Vscode
• 前端框架技术：vite^8.0.16+vue^3.5.35+vue-router^5.1.0
• 组件库：@arco-design/web-vue^2.58.0
• 状态管理：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国际化多语言（中英文/繁体）
✅ 面包屑导航/标签栏页面缓存
✅ 支持路由配置多级菜单/收缩侧边栏
✅ 全屏/侧边抽屉设置
✅ 整合图表/表格/表单/动态权限/错误处理等业务模块
✅ 清爽简约界面、可自行扩展布局模板

项目结构目录

vite8-web-admin基于最新前端技术框架 vite8.0+vue3 搭建项目模板。

Vite8-Vue3-Admin网页版后台管理模板发布到原创作品集，感谢支持~

Vite8+Vue3+ArcoDesign网页版后台管理系统

项目入口文件

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

Vite8-Admin通用布局模板

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

经典布局模板

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

配置国际化vue-i18n

支持中英文/繁体三种语言切换，支持自定义配置语言文件。

/**
 * 国际化配置
 * @author andy
 */

import { createI18n } from 'vue-i18n'
import { appState } from '@/pinia/modules/app'

// 引入语言配置
import enUS from './en-US'
import zhCN from './zh-CN'
import zhTW from './zh-TW'

// 默认语言
export const langVal = 'zh-CN'

export default async (app) => {
  const appstate = appState()
  const lang = appstate.lang || langVal
  appstate.setLang(lang)

  const i18n = createI18n({
    legacy: false,
    locale: lang,
    messages: {
      'en': enUS,
      'zh-CN': zhCN,
      'zh-TW': zhTW
    }
  })
  
  app.use(i18n)
}

ViteAdmin动态监听图表尺寸Hook

使用Echarts图表插件，采用element-resize-detector组件动态监听窗口DOM尺寸变化更新图表。

/**
 * 动态图表Hook
 */

import { onMounted, onBeforeUnmount, ref } from 'vue'
import * as echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'

export function useEcharts(el, options) {
  let chartEl
  let chartRef = ref(null)
  let erd = elementResizeDetectorMaker()

  const resizeHandle = () => {
    chartEl && chartEl.resize()
  }

  onMounted(() => {
    if(el?.value) {
      chartEl = echarts.init(el.value)
      chartEl.setOption(options)
      chartRef.value = chartEl
    }
    erd.listenTo(el.value, resizeHandle)
  })

  onBeforeUnmount(() => {
    chartEl.dispose()
    erd.removeListener(el.value, resizeHandle)
  })

  return chartRef
}

自定义缓存标签栏/面包屑导航

<template>
  <div v-if="appstate.config.tabview" class="vu__tabview">
    <a-tabs
      class="vu__tabview-tabs"
      :active-key="activeTab"
      hide-content
      editable
      size="mini"
      scroll-position="center"
      @change="changeTabs"
      @delete="removeTab"
    >
      <a-tab-pane v-for="(item, index) in tabList" :key="item.path" :closable="!item?.meta?.isAffix">
        <template #title>
          <a-dropdown trigger="contextMenu" :popup-max-height="false" @popup-visible-change="handleDropdownVisible($event, item)" @select="handleDropdown($event, item)">
            <div class="vu__tabview-tabs__label">
              {{$t(item?.meta?.title)}}
            </div>
            <template #content>
              <a-doption value="refresh" :disabled="disabledReload"><icon-refresh /> {{$t('tabview__contextmenu-refresh')}}</a-doption>
              <a-doption value="close" :disabled="item?.meta?.isAffix"><icon-close /> {{$t('tabview__contextmenu-close')}}</a-doption>
              <a-doption value="closeLeft" :disabled="isFirstTab"><icon-to-left /> {{$t('tabview__contextmenu-closeleft')}}</a-doption>
              <a-doption value="closeRight" :disabled="isLastTab"><icon-to-right /> {{$t('tabview__contextmenu-closeright')}}</a-doption>
              <a-doption value="closeOther"><icon-swap /> {{$t('tabview__contextmenu-closeother')}}</a-doption>
              <a-doption value="closeAll"><icon-folder-delete /> {{$t('tabview__contextmenu-closeall')}}</a-doption>
            </template>
          </a-dropdown>
        </template>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

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

  import { useRoutes } from '@/hooks/useRoutes'

  const props = defineProps({
    // 是否显示展开/收缩
    collapseEnable: { type: Boolean, default: true },
  })

  const appstate = appState()
  const { getMatchRoute } = useRoutes()

  const matchRoute = computed(() => getMatchRoute())

  const handleCollapse = () => {
    appstate.config.collapsed = !appstate.config.collapsed
  }
</script>

<template>
  <div v-if="appstate.config.breadcrumb" class="vu__breadcrumb flexbox">
    <a-button v-if="collapseEnable" shape="circle" size="mini" @click="handleCollapse">
      <icon-menu-unfold v-if="appstate.config.collapsed" :size="16" />
      <icon-menu-fold v-else :size="16" />
    </a-button>
    <a-breadcrumb>
      <a-breadcrumb-item v-for="(item, index) in matchRoute" :key="index">
        <router-link v-if="item.path" :to="item.path">{{$t(item?.meta?.title)}}</router-link>
        <template v-else>{{$t(item?.meta?.title)}}</template>
      </a-breadcrumb-item>
    </a-breadcrumb>
  </div>
</template>

综上就是vite8.0+vue3实战网页版admin后台管理系统的一些项目分享，希望对大家有所帮助！

如果这期内容给你带来了灵感，别忘了：
👉 点赞 + 推荐 + 收藏 👈
你的支持是我持续爆肝最新实战项目的原动力！

Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统

vite7-webos网页版os管理|Vue3+Vite7+ArcoDesign搭建pc端os后台系统

最新版Flutter3.41+Dart3.11仿写抖音APP直播+短视频+聊天应用程序

Vite8+DeepSeek-V4网页版AI助手|vue3+arco本地web版ai流式问答系统

uniapp+deepseek-v4-flash+vue3跨端流式ai应用模板【h5+小程序+app端】

Electron41+Vite8+DeepSeek-V4桌面端AI助手|electron+vue3流式ai系统

Flutter3-MacOS桌面OS系统|flutter3.41+window_manager客户端OS模板

最新研发flutter3.41+bitsdojo_window+getx客户端仿微信聊天Exe应用

Flutter3.41+DeepSeek V4智能AI应用|flutter3+getx+dio流式ai对话app模板

flutter3.41+deepseek-v4+dio+getx纯手搓桌面客户端ai流式智能对话系统

tauri2.10+deepseek v4+vite7客户端ai系统|Tauri2+Vue3.5桌面AI程序Exe

Tauri2.8+Vue3聊天系统|vite7+tauri2+element-plus客户端仿微信聊天程序