新作尝鲜，自研electron31+vue3桌面后台系统

这段时间一直潜心研发Electron31+Vite5+ElementPlus搭建轻量级桌面端后台管理系统。

框架技术

"dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "@vueup/vue-quill": "^1.2.0",
    "echarts": "^5.5.1",
    "element-plus": "^2.7.8",
    "element-resize-detector": "^1.2.4",
    "md-editor-v3": "^4.18.0",
    "mockjs": "^1.1.0",
    "pinia": "^2.2.0",
    "pinia-plugin-persistedstate": "^3.2.1",
    "sass": "^1.77.8",
    "sortablejs": "^1.15.2",
    "vue": "^3.4.31",
    "vue-i18n": "9",
    "vue-router": "^4.4.0"
},
"devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "electron": "^31.3.0",
    "electron-builder": "^24.13.3",
    "vite": "^5.3.4",
    "vite-plugin-electron": "^0.28.7"
},

如下图：electron31-viteadmin支持4种通用布局模式。

electron31-admin支持收缩侧边栏、面包屑导航、tabs快捷标签栏等功能。

项目结构

采用最新版跨端技术electron31.x整合vite5.x搭建后台模板。

桌面通用布局模板

<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" :style="{'--themeSkin': appstate.config.skin}">
    <component :is="LayoutMap[appstate.config.layout]" />
  </div>
</template>

自定义配置路由菜单

<script setup>
  import { ref, computed } from 'vue'
  import { isObject, isArray, isImg } from '@/utils'
  import { appState } from '@/pinia/modules/app'
  import { useRoutes } from '@/hooks/useRoutes'

  const props = defineProps({
    // 菜单模式(vertical|horizontal)
    mode: { type: String, default: 'vertical' },
    // 是否开启一级路由菜单
    rootRouteEnable: { type: Boolean, default: true },
  })

  import Submenu from './submenu.vue'

  // 引入主路由表
  import routes from '@/router/modules/main.js'

  const appstate = appState()
  const { route, getActiveRoute, getCurrentRootRoute, getTreeRoutes } = useRoutes()

  const activeRoute = computed(() => getActiveRoute(route))
  const rootRoute = computed(() => getCurrentRootRoute(route))
  const treeRoutes = computed(() => getTreeRoutes(routes))

  const filterRoutes = computed(() => {
    if(props.rootRouteEnable) {
      return treeRoutes.value
    }
    // 过滤一级路由菜单
    return treeRoutes.value.find(item => item.path === rootRoute.value && item.children)?.children
  })
</script>

<template>
  <div class="vu__menubar" :class="{'is-root': rootRouteEnable, 'is-collapsed': mode == 'vertical' && appstate.config.collapsed}">
    <el-menu class="vu__menus" :default-active="activeRoute" :mode="mode" :collapse="mode == 'vertical' && rootRouteEnable && appstate.config.collapsed">
      <Submenu
        v-for="route in filterRoutes"
        :key="route.path"
        :item="route"
        :rootRoute="rootRoute"
        :rootRouteEnable="rootRouteEnable"
      />
    </el-menu>
  </div>
</template>

目前该项目已经基本完结，进入最后收尾阶段。后续会做一篇详细的技术分享。

感谢各位的阅读，如果觉得还不错，可以多多支持一下哟~