什么是Electron？Electron基于Chromium和Node.js。可以使用HTML、CSS和JavaScript构建应用程序。Electron兼容Mac、Windows和Linux，可以为这三个平台构建应用程序。Electron只包含Chromium和系统API，不提供集成Vue的功能。其实你只需要将Vue编译出来的代码按照Electron指定的结构组织起来，就可以使用Vue编写桌面应用了~electron-vueelectron-vue类似于Vue脚手架，你只需要在指定的结构中编写代码即可文件夹，并使用问题：感觉脚手架作者不太维护。vue等依赖比较老，直接换版本很难说没有问题。如果你将Electron引入到现有的Vue项目中，你必须来回复制它，报告错误并更正它们。vue-cli-plugin-electron-buildervue-cli-plugin-electron-builder比electron-vue灵活多了，有把Electron集成到Vue项目中的感觉，所以本篇博客主要讲解vue-cli-plugin-electron——建设者的使用。下面说说我个人认为的几个优点：目录结构基本沿用了Vue脚手架的结构。非侵入式、依赖版本管理与普通Vue应用程序管理相同。作为VueCLI插件安装，命令统一使用vue-cli-service，一个VueCLI插件。使用vue-cli-plugin-electron-builder创建Vue项目，参考这里。引入依赖：yarnadd-Delectronelectron-buildervue-cli-plugin-electron-builderelectron-builder是一个将项目打包到各种平台的工具。添加运行脚本："scripts":{"electron:serve":"vue-cli-serviceelectron:serve","electron:build":"vue-cli-serviceelectron:build"}创建入口文件，相对于Electron项目中的main.js：//src/background.jsimport{app,protocol,BrowserWindow}from'electron';import{createProtocol,installVueDevtools,}from'vue-cli-plugin-electron-builder/lib';constisDevelopment=process.env.NODE_ENV!=='production';//保留窗口对象的全局引用，如果不这样做，当JavaScript对象被垃圾回收时，窗口将自动关闭。letwin;//Scheme必须在应用程序就绪之前注册protocol.registerSchemesAsPrivileged([{scheme:'app',privileges:{secure:true,standard:true,},}]);functioncreateWindow(){//创建浏览器窗口。win=newBrowserWindow({width:800,height:600,webPreferences:{nodeIntegration:true,},});if(process.env.WEBPACK_DEV_SERVER_URL){//加载dev的url服务器如果处于开发模式win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);如果(!process.env.IS_TEST)win.webContents.openDevTools();}else{createProtocol('app');//在不开发时加载index.htmlwin.loadURL('app://./index.html');}win.on('closed',()=>{win=null;});}//当所有窗口关闭时退出。app.on('window-all-closed',()=>{//在macOS上，应用程序及其菜单栏通常保持活动状态，直到用户使用Cmd+Q明确退出if(process.platform!=='darwin'){app.quit();}});app.on('activate',()=>{//在macOS上，当单击停靠栏图标并且没有其他窗口打开时，通常会在应用程序中重新创建一个窗口。if(win===null){createWindow();}});//当Electron完成//初始化并准备好创建浏览器窗口时将调用此方法。//某些API只能在此事件发生后使用。app.on('ady',async()=>{if(isDevelopment&&!process.env.IS_TEST){//安装VueDevtoolstry{awaitinstallVueDevtools();}catch(e){console.error('VueDevtools安装失败：',e.toString());}}createWindow();});//在开发模式下根据父进程的请求干净退出.if(isDevelopment){if(process.platform==='win32'){process.on('message',(data)=>{if(data==='graceful-exit'){app.quit();}});}else{process.on('SIGTERM',()=>{app.quit();});}}记得修改package.json："main":"background.js"运行：yarnelectron:serve
