Electron13 + vue3 hybrid desktop exe application framework electronmacui

Time:2021-11-19

Electron13 + vue3 hybrid desktop exe application framework electronmacui

1、 Project introduction

Latest technologyvite2.xTechnology and cross end frameworkelectronIntegrate and develop MacOS desktop management system applications.
Electron13 + vue3 hybrid desktop exe application framework electronmacui

2、 Technology stack

  • Editor: vscade
  • Framework technology: vite2.3.4 + vue3.0.11 + vuex4+ [email protected]
  • Span end frame: electron13.0.1
  • Packaging tool: Vue cli plugin electron builder
  • UI component library: element plus ^ 1.0.2 (hungry vue3 Component Library)
  • Pop up window component: maclayer (vue3 pop up window v3layer improved version)
  • Chart component: echarts ^ 5.1.1

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

3、 Characteristics

✅ Classic Icon + dock menu mode
✅ Smooth operation experience
✅ Drag desktop + dock menu
✅ Comply with MacOS Big Sur operation window management
✅ Rich visual effects, custom desktop wallpaper
✅ Create multiple windows visually, support drag / zoom / maximize, and can be transferred to the custom component page.

Electron13 + vue3 hybrid desktop exe application framework electronmacui

4、 Project structure directory

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Electron13 + vue3 hybrid desktop exe application framework electronmacui

Entry main.js configuration

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

//Introducing router and store
import Router from './router'
import Store from './store'

//Introduce public configuration
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')
})

Desktop layout template

The whole desktop is divided into three modules: top navigation bar + desktop menu area + bottom dock.
Electron13 + vue3 hybrid desktop exe application framework 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>

Achieve dock fisheye effect

The dock at the bottom uses pure CSS3 to achieve the effect.
Electron13 + vue3 hybrid desktop exe application framework electronmacui

<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>

The background is blurred using a 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;}

Imitation MAC style pop-up window assembly

The pop-up window used in the project uses vue3 custom components to achieve the effect. The overall style is similar to MacOS and supports multi window and dynamic loading components.
Electron13 + vue3 hybrid desktop exe application framework electronmacui

  • Import. Vue page
    //Import component page
    import Home from '@/views/home.vue'
    v3layer({
      type: 'component',
      content: Home,
      ...
    })
  • Load iframe Popup
    //Bring in frame page
    v3layer({
      type: 'iframe',
      content: 'https://cn.vitejs.dev/',
      ...
    })

Vite.js + electron packaging configuration

/**
 *@ desc vite2 + electron packaging configuration
 * @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, the above is the introduction of vite2 + electron developing MAC like OSX desktop applications. I hope you like it~~
Electron12 background management system | vue3 + electron cross end desktop background system
Electron13 + vue3 hybrid desktop exe application framework electronmacui

This work adoptsCC agreement, reprint must indicate the author and the link to this article

This article is an original article and cannot be reproduced without the permission of the author. You are welcome to exchange QQ (282310962) Wx (xy190310)