快速搭建electron+vue框架

简单的记录快速搭建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);
});