Electron 41.2 + Vite8 + Vue3 + Pinia4 + ElementPlus跨平台管理后台Admin系统

2026-11-13 21:37:17 142 阅读 AI 写同款 · GEO 优化AI 选题数据监测一键分发 ›

xiaoyan_2018 墨衍会员 · AI 创作全网分发关注 + 加入社区

Vue3+Vite4+Pinia+ElementPlus从0-1 web项目搭建 Vue3+Vite4+Pinia+ElementPlus 阅读详情

Electron 41.2 + Vite 8 + Vue 3 + Element Plus：2026 最完整桌面端后台管理系统搭建。

Electron 41.2 + Vite 8 + Vue3 深度集成，Pinia4状态配置，ElementPlus组件库，搭建桌面版中后台管理系统。支持亮色+深色主题、4种通用布局模板，覆盖图表、表格、表单、列表、编辑器、错误处理等页面。

项目框架知识

跨平台框架：Electron41.2
前端技术框架：vite^8.3.6+vue^3.5.45+vue-router^5.4.0
组件库：element-plus^2.14.8
状态管理：pinia^4.1.0
国际化方案：vue-i18n^11.4.18
图表插件：echarts^6.1.0
markdown组件：md-editor-v3^7.1.0
富文本组件：@vueup/vue-quill^1.5.5
数据模拟：mockjs^1.1.0
打包构建：electron-builder26.18.0

项目目录结构

<script setup>
  import { onMounted, computed } from 'vue'
  import { useRouter } from 'vue-router'

  import { appState } from '@/pinia/modules/app'
  import { Loaded } from '@/plugins/loaded'

  // 引入组件库国际化
  import zhCN from 'element-plus/es/locale/lang/zh-cn'
  import zhTW from 'element-plus/es/locale/lang/zh-tw'
  import enUS from 'element-plus/es/locale/lang/en'

  const locales = {
    'zh-CN': zhCN,
    'zh-TW': zhTW,
    'en': enUS,
  }

  const router = useRouter()
  const appstate = appState()

  const locale = computed(() => locales[appstate.lang] ?? zhCN)

  appstate.changeTheme()

  Loaded()

  onMounted(async() => {
    // 确保初始导航就绪
    await router.isReady()
    // 通知主进程当前窗口已渲染就绪，显示窗口
    window.electron.send('win-ready')
  })
</script>

<template>
  <el-config-provider :locale="locale">
    <router-view />
  </el-config-provider>
</template>

后台模板结构

<script setup>
  import { computed } from 'vue'
  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 LayoutComponent = computed(() => {
    switch (appstate.config.layout) {
      case 'classic':
        return Classic
      case 'columns':
        return Columns
      case 'vertical':
        return Vertical
      case 'horizontal':
        return Horizontal
      default:
        return Classic
    }
  })
</script>

<template>
  <div class="vuadmin__container" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="LayoutComponent" />
  </div>
</template>