快速搭建electronvue框架

简略的记录疾速搭建 electron+vue 我的项目的过程

一、创立 vue 我的项目

首先疾速搭建一个 vue 我的项目，可参考文章“疾速搭建 vue 我的项目”

二、装置 electron

vue add electron-builder

装置过程中会让抉择 electron 版本，自行抉择一个版本实用即可，此处抉择的是 V9.0.0

如下载过程中，呈现 electron-v9.1.0-win32-x64.zip 等一些资源无奈下载的状况，可为 npm 配置淘宝镜像或者在我的项目根目录下退出 .npmrc 配置文件，如下所示：

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

三、运行查看成果

npm run electron:serve

如下所示：

四、配置菜单

const {app, Menu, shell} = require('electron')

// 具体配置可参考 electron 文档
let template =[{
    role: '帮忙',
    submenu: [
      {
        label: '更多',
        click: async () => {await hell.openExternal('https://electronjs.org')
        }
      }
    ]
}]
  
const menu = Menu.buildFromTemplate(template)
Menu.setApplicationMenu(menu)

五、系统托盘

import {Tray, Menu} from "electron";
import path from 'path'
let appTray = null;
// 系统托盘右键菜单
var trayMenuTemplate = [{
    label: '显示 App',
    click: () => {win.show();
    }
}]; 

// 图标
appTray = new Tray(path.join(__static, 'app.ico')); 

// 设置此图标的上下文菜单
const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
appTray.setContextMenu(contextMenu);

appTray.on('click', () => {win.isVisible() ? win.hide() : win.show();
})

appTray.on('right-click', () => {win.popUpContextMenu(contextMenu);
});