electron13+vue3混合式桌面exe应用框架ElectronMacUI

一、项目介绍

技术最新vite2.x技术和跨端框架electron整合开发仿macOS桌面端管理系统应用。

二、技术栈

  • 编辑器:Vscode
  • 框架技术:Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4
  • 跨端框架:Electron13.0.1
  • 打包工具:vue-cli-plugin-electron-builder
  • UI组件库:Element-Plus^1.0.2 (饿了么vue3组件库)
  • 弹窗组件:MacLayer (vue3弹窗v3layer改进版)
  • 图表组件:Echarts^5.1.1

三、特性

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

四、项目结构目录

入口main.js配置

import { createApp } from 'vue'
import App from './App.vue'

// 引入Router和Store
import Router from './router'
import Store from './store'

// 引入公共配置
import gPlugins from './plugins'

import { winCfg, loadWin } from './windows/actions'

loadWin().then(config => {
    winCfg.window = config

    createApp(App)
    .use(Router)
    .use(Store)
    .use(gPlugins)
    .mount('#app')
})

桌面布局模板

整个桌面分为顶部导航条+桌面菜单区域+底部dock三大模块。
electron13+vue3混合式桌面exe应用框架ElectronMacUI

<template>
    <div class="macui__wrapper" :style="{'--themeSkin': store.state.skin}">
        <div v-if="!route.meta.isNewin" class="macui__layouts-main flexbox flex-col">
            <div class="layout__topbar">
                <TopNav />
            </div>

            <div class="layout__workpanel flex1 flexbox" @contextmenu="handleCtxMenu">
                <div class="panel__mainlayer flex1 flexbox" style="margin-bottom: 70px;">
                    <DeskMenu />
                </div>
            </div>
            <Dock />
        </div>
        <router-view v-else class="macui__layouts-main flexbox flex-col macui__filter"></router-view>
    </div>
</template>

实现dock鱼眼效果

底部的dock采用了纯css3实现效果。

<template>
    <div class="macui__dock">
        <div class="macui__dock-wrap macui__filter" ref="dockRef">
            <a class="macui__dock-item"><span class="tooltips">appstore</span><img src="/static/mac/appstore.png" /></a>
            <a class="macui__dock-item active"><span class="tooltips">launchpad</span><img src="/static/mac/launchpad.png" /></a>
            ...
        </div>
    </div>
</template>

背景使用backdrop-filter实现模糊化效果。

.macui__deskmenu {display: flex; flex-direction: column; flex-wrap: wrap;}
.macui__deskmenu-box {height: 90px;}
.macui__deskmenu-item {border: 1px solid transparent; border-radius: 15px; color: #fff; cursor: pointer; display: flex; align-items: center; flex-direction: column; margin: 10px 0 0 10px; padding: 4px 0; width: 70px; transition: background-color .3s, border-color .3s;}
.macui__deskmenu-item:hover {background: rgba(255,255,255,.15); border-color: rgba(255, 255, 255, .2);}
.macui__deskmenu-item img {height: 40px; width: 40px; object-fit: cover;}
.macui__deskmenu-item .title {display: block; margin-top: 4px; padding: 0 8px; word-break: break-all; text-align: center;}

仿mac风格弹窗组件

项目中使用的弹窗使用的是vue3自定义组件实现效果。整体风格类似macOS,支持多窗口、动态载入组件。

  • 引入.vue页面
    // 引入组件页面
    import Home from '@/views/home.vue'
    v3layer({
      type: 'component',
      content: Home,
      ...
    })
  • 加载iframe弹窗
    // 引入frame页面
    v3layer({
      type: 'iframe',
      content: 'https://cn.vitejs.dev/',
      ...
    })

vite.js+electron打包配置

/**
 * @Desc     vite2+electron打包配置
 * @Time     andy by 2021-06
 * @About    Q:282310962  wx:xy190310
 */

{
    "productName": "electron-macui",
    "appId": "cc.xiaoyan.electron-macui",
    "copyright": "Copyright © 2021-present",
    "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}"
    }
}

ok,以上就是vite2+electron开发仿mac osx桌面应用的介绍。希望大家喜欢哈~~
electron12后台管理系统|vue3+electron跨端桌面后台系统

本作品采用《CC 协议》,转载必须注明作者和本文链接
本文为原创文章,未经作者允许不得转载,欢迎大家一起交流 QQ(282310962) wx(xy190310)
讨论数量: 5

我在想,一个月发一个项目,项目真的这么好写吗?

5个月前 评论

@deatil 哪有那么容易,也是折腾了好几个通宵开发的。 :grin:

5个月前 评论
chowjiawei

开源吗 我想下来玩

4个月前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!
文章
29
粉丝
33
喜欢
89
收藏
54
排名:230
访问:2.0 万
私信
所有博文
博客标签
react
1
angular
1
react仿微信
2
react实战开发
2
react+redux
1
react网页聊天
1
vue聊天室
2
vue仿微信
1
vue即时通讯
1
vue聊天IM
1
vue网页版
1
vue仿微信网页端
1
vue聊天pc端
1
angular仿微信
1
angular聊天室
1
angular+node聊天
1
h5仿微信
1
仿微信语音
1
仿微信界面
1
RN弹窗
1
react-native自定义弹窗
1
react-native弹窗
1
React Native
1
reactNative仿微信
1
RN仿微信聊天
1
ReactNative朋友圈
1
uniapp仿微信
1
uniapp聊天室
2
uniapp聊天App
1
uni-app+vue实例
1
uni-app即时通讯
1
uniapp直播
1
uni-app仿抖音
1
uniapp仿陌陌
1
uni-app小视频
1
taro仿微信
1
taro聊天室
1
taro仿微信界面
1
taro+react聊天APP
1
taro即时通讯
1
electron+vue
1
electron-vue仿微信
1
electron聊天
1
electron实例
1
flutter实例
1
flutter仿微信
1
flutter+dart聊天
1
flutter聊天室
1
flutter聊天界面
1
vue自定义弹窗
1
vue全局对话框
1
vue长按弹出框
1
vue右键弹层
1
nuxt对话框
1
vue仿微信弹窗
1
vue仿探探
1
vue仿Tinder
1
vue卡片堆叠
1
vue翻牌滑动
1
nuxt仿探探
1
nuxt聊天室
1
nuxt仿微信
1
nuxt即时聊天
1
vue+nuxt聊天实例
1
nuxt.js朋友圈
1
vue.js自定义对话框
1
vue pc端弹窗
1
vue.js桌面端模态框
1
vue弹窗组件
1
vue仿layer
1
vue.js自定义滚动条
1
vue虚拟滚动条
1
vue美化滚动条
1
vue仿饿了么滚动条
1
Vue-Scrollbar
1
react.js弹窗示例
1
react桌面端弹框
1
react.js自定义对话框
1
react pc自定义弹窗
1
react全局弹框
1
vue3.0自定义组件
1
vue3弹框
1
vue3.x对话框
1
vue3.0弹窗
1
vue3.0实例
1
vue3.0聊天室
1
vue3.0仿微信
2
vue3聊天模板
1
vue3+vant3实战开发
1
vue3.x案例
1
vue3聊天实例
1
vue3.0仿QQ
1
vue3.x实战聊天
1
vue3网页聊天
1
vue3.0仿抖音app
1
vue3短视频
1
vue3.x小视频
1
vue3.0直播实例
1
vue3+vite2+vant3实战
1
vue3跨端开发
1
electron仿QQ
1
electron打包
1
electron聊天室
1
electron仿微信
1
electron仿抖音
1
electron短视频
1
electron直播
1
vite2+electron12
1
vite2+vue3.x+swiper
1
vue3+vite.js+vant3
1
vue3后台系统
1
Electron管理系统
1
vite2+electron后台
1
electron12权限管理
1
electron桌面端后台
1
vue3桌面管理
1
vite2+electron13
1
electron仿mac桌面
1
electron桌面管理
1
vite2桌面应用
1
uniapp短视频
1
uniapp仿抖音
1
uni-app直播
1