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三大模組。

<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 協議》，轉載必須註明作者和本文連結