electron13-vue3-macui（基于vite2.x+electron高仿iMac桌面UI管理框架系统） electron13-vue3-macui：基于vite2.x

项目介绍 vite2-electron-macui 一款轻量级的桌面端仿mac big sur桌面管理框架。使用最新技术栈electron13+vue3+element-plus开发实现。支持多窗口、可拖拽桌面+dock菜单等功能。

功能特性 ?经典的图标+dock菜单模式
?流畅的操作体验
?可拖拽桌面+dock菜单
?符合macOS big sur操作窗口管理
?丰富的视觉效果，自定义桌面壁纸
?可视化创建多窗口，支持拖拽/缩放/最大化，可传入自定义组件页面。

文章图片

实现技术

技术框架：vite^2.3.4+vue^3.0.11+vuex@4+vue-router4.x
跨端框架：electron^13.0.1
组件库：element-plus^1.0.2
图表组件：echarts^5.1.1
拖拽排序：sortablejs^1.13
预处理器：sass^1.34
弹窗组件：maclayer
滚动条：macscroll

electron13-vue3-macui（基于vite2.x+electron高仿iMac桌面UI管理框架系统）

文章图片

文章图片

项目结构目录

文章图片

整个项目均是使用vue3最新语法编码开发而成。

文章图片

文章图片

【electron13-vue3-macui（基于vite2.x+electron高仿iMac桌面UI管理框架系统）】

文章图片

package.json依赖信息

{ "name": "electron-macui", "version": "0.1.0", "description": "基于Electron13+Vite2+ElementPlus仿Mac桌面UI后台框架", "author": "andy ：282310962", "copyright": "MIT License(MIT) ?2021 Andy", "scripts": { "dev": "vite", "build": "vite build", "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "main": "background.js", "dependencies": { "element-plus": "^1.0.2-beta.45", "echarts": "^5.1.1", "element-resize-detector": "^1.2.2", "mockjs": "^1.1.0", "sortablejs": "^1.13.0", "sass": "^1.34.0", "sass-loader": "^10.1.1", "vue": "^3.0.11", "vue-i18n": "^9.1.6", "vue-router": "^4.0.6", "vuex": "^4.0.0", "wangeditor": "^4.7.1" }, "devDependencies": { "@vitejs/plugin-vue": "^1.2.1", "@vue/cli-service": "^4.5.12", "@vue/compiler-sfc": "^3.0.5", "electron": "^13.0.1", "electron-devtools-installer": "^3.1.0", "vite": "^2.3.4", "vue-cli-plugin-electron-builder": "~2.0.0-rc.6" } }

electron自定义无边框导航

文章图片

为了保持整体项目UI的一致性，窗口采用了无边框模式 frame:false
顶部导航条采用自定义组件实现功能。同时支持自定义标题、背景及文字颜色等功能。下拉菜单则是使用的element-plus中的Dropdown组件实现功能。

桌面UI模板

文章图片

如上图：桌面菜单栏位于屏幕顶部。程序坞Dock位于屏幕底部。

vue3+electron实现dock菜单
如上图：桌面dock使用了毛玻璃模糊背景，使用css3实现动效展示。

使用sortablejs实现菜单拖拽改变位置。

// DOCK菜单拖拽 const dragDockMenu = () => { Sortable.create(dockRef.value, { handle: '.macui__dock-item', filter: '.macui__dock-filter', animation: 200, delay: 0, onEnd({ newIndex, oldIndex }) { console.log('新索引：', newIndex) console.log('旧索引：', oldIndex) } }) }// 地图窗口 const openMaps = () => { createWin({ title: '地图', route: '/map', width: 1000, height: 500, }) }// 日历窗口 const openCalendar = () => { createWin({ title: '日历', route: '/calendar', width: 500, height: 500, resize: false, }) }

vue3动态加载组件

文章图片

如上图：项目中的弹窗功能，是基于之前开发的一款vue3桌面端弹窗插件v3layer改进版。
https://segmentfault.com/a/11...
v3layer支持超过30+种参数自定义配置，支持拖拽、四角缩放、全屏等功能，并且新增了支持动态传入组件页面功能。

// 引入组件页面 import Home from '@/views/home.vue'v3layer({ type: 'component', content: Home, ... })

v3layer({ type: 'iframe', content: 'https://cn.vitejs.dev/', ... })

这样就能使用弹窗加载组件或iframe页面了。
桌面菜单配置deskmenu.js

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, }, // ... ]

electron-builder.json打包配置

{ "productName": "electron-macui", "appId": "cc.xiaoyan.electron-macui", "copyright": "Copyright ? 2021-present", "author": "Power By XiaoYan | Q：282310962WX：xy190310" "compression": "maximum", "asar": false, "extraResources": [ { "from": "./resource", "to": "resource" } ], "nsis": { "oneClick": false, "allowToChangeInstallationDirectory": true, "perMachine": true, "deleteAppDataOnUninstall": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "ElectronMacUI" }, "win": { "icon": "./resource/shortcut.ico", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}", "target": [ { "target": "nsis", "arch": ["ia32"] } ] }, "mac": { "icon": "./resource/shortcut.icns", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" }, "linux": { "icon": "./resource", "artifactName": "${productName}-v${version}-${platform}-${arch}-setup.${ext}" } }

okey，使用electron13+vite2开发仿制macBigSur桌面系统就分享到这里。
最后附上一个electron+vue3+antdv仿QQ客户端项目
https://segmentfault.com/a/11...