如何在Vue和React中使用Electron提示：本文只是教你如何轻松上手。Electron本身非常强大。这里的组合正好可以让你轻松实现一个桌面应用！如果需要electron的复杂配置，建议参考官网~前言Electron对我们来说相当于一个shell，可以把写好的web程序嵌入到shell中，一个可以在桌面运行的程序，以及可以把网页打包成桌面应用，这也类似于我们平时做的用shell打包的5+app。简单来说，就是软件。Electron以Vscode闻名。如果想了解更多，可以查看官网的详细介绍。提示：以下为本文正文内容，以下案例可供参考。1、使用Electron的前提是要安装nodejs环境，所以请检查你的电脑是否安装了nodejs环境。可以在cmd或者powerShell中使用node-v查看。2.、Vue和React中快速使用提示：需要在Vue和React打包成功的文件目录下！完整的配置文件，我这里上传了gitee，复制粘贴文件直接npmi即可！:XLL/electron打包地址1.用npminit在打包好的根目录下安装Electron。否则，下一步安装的Electron可能会安装在外层vue项目中。在dist文件夹下创建main.js文件和package.json文件如下就是main.js的内容，可以复制粘贴进去，下面是最简单的electron配置。如果想要复杂的配置，可以参考官网配置。const{app,BrowserWindow,Menu}=require('electron');//引入electronletwin;letwindowConfig={minWidth:1600,//最小宽度minHeight:800,//最小高度show:false,resizable:false//frame:false,//fullscreen:false,//titleBarStyle:'hiddenInset',//titleBarOverlay:true};//窗口配置程序运行窗口的大小functioncreateWindow(){win=newBrowserWindow(windowConfig);//创建窗口win.loadURL(`file://${__dirname}/index.html`);//窗口要显示的内容index.html是打包生成的index.html//win.webContents.openDevTools();//启用调试工具//隐藏菜单栏Menu.setApplicationMenu(null)//默认最大化win.maximize()win.show()win.on('close',()=>{//回收BrowserWindow对象win=null;});win.on('resize',()=>{//默认刷新//win.reload();})}app.on('ready',createWindow);app.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit();}});app.on('activate',()=>{if(win==null){createWindow();}});//Electron仅限于只打开一个应用程序窗口，有窗口时唤醒该窗口constgotTheLock=app.requestSingleInstanceLock()if(!gotTheLock){app.quit()}else{app.on('second-instance',(event)=>{if(win){if(win.isMinimized())win.restore()win.focus()}})app.on('ready',()=>{//createWindow()const{Menu}=require('electron')Menu.setApplicationMenu(null)//隐藏菜单栏})}在package.json中修改，可以直接复制粘贴以下内容，electron限制版本号，复制粘贴以下内容后，在dist根目录cmd中执行npmidownload，如果你的版本号和我的不符，可能会打包失败！{"name":"xxx","productName":"XXXXX","author":"小叮当","version":"1.0.0","main":"main.js","description":“项目描述”，“脚本”：{“pack”：“npxelectron-builder--dir”，“dist”：“npxelectron-builder”，“postinstall”：“npxelectron-builderinstall-app-deps”,"start":"npxelectron.","package":"npx电子包装商。relay--platform=win32--arch=x64--icon=favicon.ico--out=./out--asar--app-version=1.0.0--overwrite--ignore=node_modules"},"构建":{"electronVersion":"1.8.4","win":{"requestedExecutionLevel":"highestAvailable","target":[{"target":"nsis","arch":["x64"]}]},"appId":"demo","artifactName":"demo-${version}-${arch}.${ext}","nsis":{"artifactName":"demo-${version}-${arch}.${ext}"},"extraResources":[{"from":"./static/","to":"app-server","filter":["**/*"]}],"publish":[{"provider":"generic"}]},"dependencies":{"core-js":"^2.4.1","create-egg":"^2.0.1","electron":"^16.2.6","electron-builder":"^22.14.13","electron-package":"^0.1.0","electron-packager":"^12.1.0","electron-updater":"^2.22.1"}}执行命令：执行npmrunstart成功，效果如下：（博主这里没写，自己写的话，运行界面应该和你写的一样）2、运行成功后，打包成软件，执行命令：npmrunpackage注意：我这里什么都没有写所以是空的，
