Electron13+Vue3+ElementPlus模仿macOS桌面版后台系统框架

原创

andy2018

修改于 2021-06-25 10:15:26

2.9K1

修改于 2021-06-25 10:15:26

文章被收录于专栏：h5

项目介绍

electron-vue3-macOS 一款整合vite2.x+electron13跨平台构建模仿mac桌面UI后台管理系统。

基于最新的vite2.x和跨端技术electron13搭建开发。支持多窗口及毛玻璃效果。

前端技术栈

编码工具：Vscode
框架技术：Vite2.3.4+Vue3.0.11+Vuex4+VueRouter@4
跨端框架：Electron13.0.1
打包工具：vue-cli-plugin-electron-builde
UI组件库：Element-Plus^1.0.2 (饿了么vue3组件库)
弹窗组件：MacLayer (vue3弹窗v3layer改进版)
图表组件：Echarts^5.1.1
模拟请求：Mockjs1.1.0

功能特性

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

✅流畅的操作体验

✅可拖拽桌面+dock菜单

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

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

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

项目结构

非常清晰的项目结构目录。采用最新的vue3语法编码开发。

饿了么vue3桌面组件库

项目中使用了element-plus组件库。

安装

npm i element-plus -S

引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

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

main.js入口配置

/**
 * 渲染进程主入口
 * @author XiaoYan
 */

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菜单 -->
            <Dock />
        </div>
        <router-view v-else class="macui__layouts-main flexbox flex-col macui__filter"></router-view>
    </div>
</template>

vue3实现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>

.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;}

vue3实现动态传入组件弹窗

项目中使用到的弹窗是基于vue3自定义组件v3layer改进而来。支持传入动态组件页面。

// 引入组件页面
import Home from '@/views/home.vue'

v3layer({
    type: 'component',
    content: Home,
    ...
})

// 引入frame页面
v3layer({
    type: 'iframe',
    content: 'https://cn.vitejs.dev/',
    ...
})

菜单配置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,
    },
    // ...
]

如果对v3layer具体的实现方式感兴趣，可以去看看下面这篇分享文章

https://cloud.tencent.com/developer/article/1768614

vite2.x+electron打包配置

{
    "productName": "electron-macui",
    "appId": "cc.xiaoyan.electron-macui",
    "copyright": "Copyright © 2021-present",
    "author": "Power By XiaoYan | Q：282310962  WX：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}"
    }
}

ending，基于vue3+vite2+electron13开发仿macOS桌面系统就分享到这里。