electron13+vite2+elementPlus仿mac桌面

概述

运用最新前端技术Vite2.x+Electron+ElementPlus+Echarts等技术构架开发跨端仿Mac桌面管理系统ElectronMacUI | 基于vue3+electron13模仿Mac桌面UI客户端。

详细

一、项目介绍

基于vite.js框架整合electron.js跨端技术开发一款类似mac big sur11桌面管理系统EXE平台。

二、效果预览

三、功能特点

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

✅流畅的操作体验

✅可拖拽桌面+dock菜单

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

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

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

四、实现过程

①、electron创建无边框窗口

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

②、electron实现mac桌面

如下图：项目中桌面模块分为顶部导航+桌面菜单+底部鱼眼dock菜单三个区域。

template>

③、electron+vue3实现鱼眼dock效果

 

项目中很多地方都使用了毛玻璃模糊效果。

五、项目结构目录