快速搭建electron+vue框架教程

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