这段时间一直在捣鼓electron13+vite2结合开发vue3桌面端项目。网上也有一些桌面管理项目，不过很多都是基于jQuery开发，要么就是使用vue2.x开发。于是自己就整了个ElectronVue3MacUI项目。

electron-vite2-macui 一款基于最新技术栈electron13+vite2.3+vue3+element-plus开发的仿制mac big sur桌面UI管理框架。

技术框架

• 使用技术：vite2.3.4+vue3.0.11+vuex@4+vue-router4.x
• 跨端框架：electron13.0.1
• 组件库：element-plus1.0.2
• 图表组件：echarts5.1.1
• 拖拽排序：sortablejs1.13
• 预处理器：sass1.34
• 弹窗组件：maclayer

整个项目采用背景透明模糊化效果。底部dock菜单可自适应收缩动画。

功能特性

?经典的图标+dock菜单模式

?流畅的操作体验

?可拖拽桌面+dock菜单

?符合macOS big sur操作窗口管理

?丰富的视觉效果，自定义桌面壁纸

?可视化创建多窗口，支持拖拽/缩放/最大化，可传入自定义组件页面。

项目结构目录

采用vite2清晰标准的目录结构模式。

自定义导航条

如上图：项目中的所有弹窗顶部均是自定义组件实现的功能。

底部Dock菜单

桌面菜单支持拖拽及自定义icon图标和img图片功能。

import Home from '@/views/home/index.vue'
import ControlPanel from '@/views/home/dashboard.vue'
import CustomTpl from '@/views/home/customTpl.vue'
import Table from '@/views/component/table/custom.vue'
import Form from '@/views/component/form/all.vue'
import UserSetting from '@/views/setting/manage/user/index.vue'
import Ucenter from '@/views/setting/ucenter.vue'

const deskmenu = [
    {
        type: 'component',
        icon: 'el-icon-monitor',
        title: '首页',
        component: Home,
    },
    {
        type: 'component',
        icon: 'icon-gonggao',
        title: '控制面板',
        component: ControlPanel,
    },
    {
        type: 'component',
        img: '/static/mac/reminders.png',
        title: '自定义组件模板',
        component: CustomTpl,
        area: ['600px', '360px'],
    },
    {
        type: 'iframe',
        img: '/static/vite.png',
        title: 'vite.js官方文档',
        component: 'https://cn.vitejs.dev/',
    },
    {
        type: 'component',
        icon: 'el-icon-s-grid',
        title: '表格',
        component: Table,
    },
    {
        type: 'component',
        icon: 'icon-peizhi',
        title: '表单',
        component: Form,
    },
    {
        type: 'component',
        img: '/static/mac/keychain.png',
        title: '用户设置',
        component: UserSetting,
    },
    {
        type: 'component',
        img: '/static/mac/user.png',
        title: '个人中心',
        component: Ucenter,
        area: ['850px', '550px'],
    },
    // ...
]

// 点击菜单
const handleMenuClicked = (menu) => {
    let icon = menu.icon ? `` : menu.img ? `` : ''
    let title = menu.title ? `
${icon}${menu.title}
` : '标题'
    v3layer({
        type: menu.type || null,
        layerStyle: menu.style || '',
        customClass: 'macui__deskLayer',
        title: title,
        content: menu.component || '
嗷嗷！您似乎忘记了填充内容。
',
        area: menu.area || ['1000px', '550px'],
        shade: false,
        xclose: true,
        maximize: menu.maximize != false ? true : false,
        resize: menu.resize != false ? true : false,
        fullscreen: menu.fullscreen || false,
        zIndex: 500,
        topmost: true,
    })
}

好了，以上就是基于electron+vue3开发跨端仿mac桌面UI框架的介绍。希望对大家有所帮助哈！