快速搭建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);});