小编刚开始接触electron。最近，公司在一个项目中使用了它。让自己学习学习。这里说一点自己的学习心得，希望能给最近想学习的朋友们一些学习的小捷径，希望对大家有所帮助=====，废话不多说，开始吧！！！什么是电子？相信大家在刚接触电子的时候，都有同样的疑惑。它到底是做什么的？.下面小编就为大家一一解读。Electron是一个允许您使用传统前端技术（Nodejs、Javascript、HTML、CSS）开发跨平台桌面应用程序的框架。这里所说的桌面应用程序是指运行在Windows、OSX和Linux系统上的程序。也就是说，electron正在开发桌面应用，兼容windows、osx、liunx。其中我们最熟悉和使用的Atom和VsCode编辑器都是基于Electron的。构建并启动第一个Electron-vue项目#我们首先要在自己的电脑上安装node安装vue-cli和脚手架示例代码npminstall-gvue-cli接下来开始安装第一个项目，等待事件可能有点好久不见，大家耐心等待。如果在vueinitsimulatedgreg/electron-vuevue-markdown项目中遇到，一直回车即可。项目初始化完成后，使用scss/sass，默认安装axios、vue-electron、vue-router、vuex等我们在项目中常用的vue全家桶。#安装依赖并运行你的程序cdvue-markdownyarn#或npminstallyarnrundev#或npmrundev这里可能会遇到错误，不用担心，小编已经找到解决方法了，很简单，在webpack中找到.electron-HtmlWebpackPlugin.web.config.js和.electron-vue/webpack.renderer.config.js在vue中，添加templateParameters,templateParameters(compilation,assets,options){return{compilation:compilation,webpack:compilation.getStats().toJson(),webpackConfig:compilation.options,htmlWebpackPlugin:{files:assets,options:options},process,};}，增加了两个js修改。修改完成后，重新启动项目。！！！如果没有遇到错误，可以直接启动项目。启动完成后，你会看到这样的界面，证明你已经成功创建了一个新的。恭喜！讲解Electron-vue项目的文件结构Electron分为两个进程，main和renderer进程在main主进程中，index.js是主进程的进程js在renderer渲染进程中。rendererprocessassets的目录和作用：放置静态资源，比如图片，视频，静态配置common：放置静态js，比如页面components需要的公共功能：放置vuepagerouter：放置页面routingstore：放置publicvuex1、BrowserWindow等模块，创建窗口functioncreateWindow(){mainWindow=newBrowserWindow({//创建界面width:Integer-窗口宽度，单位像素。默认为800height:Integer-窗口高度，单位像素。默认is600.x:Integer-窗口相对于屏幕的左偏移位置。默认居中。y:Integer-窗口相对于屏幕顶部的偏移位置。默认居中。useContentSize:Boolean-宽度和高度使用的大小网页的大小，这意味着实际窗口的大小应该包括窗口框架的大小，它会稍微大一些，默认为falsecenter:Boolean-窗口屏幕居中minWidth:Integer-窗口最小宽度，默认为0minHeight:Integer-窗口最小高度，默认为0maxWidth:Integer-窗口最大宽度，默认为无限制。maxHeight:Integer-窗口最大高度，默认无限制。resizable:Boolean-窗口大小是否可以改变，默认为truemovable:Boolean-窗口是否可以拖动。在Linux上无效。默认为trueminimizable:Boolean-窗口是否可以最小化。在Linux上无效。默认为真maximizable:Boolean-窗口是否可以最大化。在Linux上无效。默认为trueclosable:Boolean-窗口是否可以关闭。在Linux上无效。在Linux上无效。默认为falsefullscreen:Boolean-窗口是否可以全屏显示。当明确设置为false时，全屏按钮将被隐藏，并在macOS上被禁用。默认falsefullscreenable:Boolean-在macOS上，全屏按钮是否可用，默认为trueskipTaskbar:Boolean-是否在任务栏中显示窗口。默认为falsekiosk：布尔值-kiosk模式。默认为falsetitle:String-窗口的默认标题。默认“Electron”图标：NativeImage-窗口图标，如果不设置，窗口将使用可用的默认图标。show:Boolean-创建窗口时是否显示。默认为trueframe:Boolean-指定false以创建无框架窗口。默认为trueacceptFirstMouse:Boolean-是否允许单击web视图以激活窗口。默认falsedisableAutoHideCursor:Boolean-是否在键入时隐藏鼠标。默认falseautoHideMenuBar：布尔值-隐藏菜单栏，除非单击Alt。默认falseenableLargerThanScreen:Boolean-是否允许将窗口调整为大于屏幕。默认为falsebackgroundColor:String-窗口的背景色为十六进制，如#66CD00（支持透明度）。在Linux和Windows上默认为#000（黑色），在Mac上默认为#FFF（或透明）。hasShadow:Boolean-窗口是否有阴影。仅在macOS上有效。默认为truedarkTheme:Boolean-为窗口使用深色主题，仅在某些使用GTK+3的桌面环境中有效。默认为falsetransparent:Boolean-窗口是透明的。默认为falsetype:String-窗口类型，默认为普通窗口。titleBarStyle:String-窗口标题栏样式。webPreferences:Object-设置接口属性。});mainWindow.loadURL(winURL);//从渲染器进程加载窗口url、页面app.on("ready",createWindow);//当appready时创建window可以根据需求设置以上属性2、app方法模块//当window-all-closed被触发时，退出appapp.on('window-all-closed',()=>{if(process.platform!=='darwin'){app.quit()}})//当electron初始化完成后，调用新窗口打开页面all-closed:当所有窗口关闭时触发，在windows和linux中，当所有窗口退出时通常是在应用程序退出时before-quit:在应用程序退出前触发will-quit:在应用程序即将退出时触发quit:win.maxmize应用程序退出时触发::应用程序最大化win.minmize:应用程序最小化hide:窗口隐藏时close:窗口关闭3、主进程与渲染进程通信时发送数据。通过一个叫“message”的字段在主进程中写入//发送给渲染进程mainWindow.webContents.on('did-finish-load',function(){mainWindow.webContents.send('message','我主进程发送给渲染进程的数据')});如何在渲染过程中接受它？mounted(){this.$electron.ipcRenderer.on('message',(event,data)=>{console.log('data:',data)//从主进程发送到渲染进程的数据});2、渲染进程---->主进程主进程通过一个叫做messageipcMain.on('message',(event,data)=>{console.log(data);//通过控制台打印渲染进程发送的消息})渲染进程通过消息字段this.$electron.ipcRende向主进程发送消息rer.send('message','我是渲染进程发给主进程的数据');3.两者的结合由渲染进程发送给主进程，然后主进程发送给渲染进程并在主页面打印进程接收消息并返回回复信息ipcMain.on('message',(event,arg)=>{console.log(arg);//通过控制台打印消息event.sender.send('reply','messagefrommain.js');//回复thesenderwithamessage})然后render进程发送数据，并接受主进程返回的数据，并显示在页面上mounted(){//向主进程发送消息ipcRenderer.send('消息'，'来自渲染器的测量！'）；//接收消息并显示在页面上ipcRenderer.on('reply',(event,arg)=>{document.getElementById('message').innerHTML=arg;})});在这个过程中，你可能会遇到一些奇怪的问题，比如编辑遇到的。错误：1.http://eslint.org/docs/rules/eol-last表示：文档末尾需要换行；Errors:2http://eslint.org/docs/rules/spaced-comment的意思是：//注释后跟空格。错误：3http://eslint.org/docs/rules/indent表示：缩进错误，设置'缩进'：0，错误：4http://eslint.org/docs/rules/no-tabs表示：制表符缩进errors等类似的错误信息都是因为文件编码的代码不符合eslint语法校验规则。解决办法：这是因为你新建项目的时候默认是验证eslint的，应该选择NO如果项目已经创建了，这个是死人的补救办法。涉及三个文件，都位于目录.electron-vue/下，分别是：.electron-vue/webpack.main.config.js.electron-vue/webpack.renderer.config.js.electron-vue/webpack.web.config.js修改后的代码也很一致，方法就是：找一个类似下面的配置，然后删掉。言归正传，如果此时没问题，我们刷??新页面，看到控制台显示：至此我们已经告一段落，完成了渲染流程---主流程，，，主流程---渲染过程的数据传输！！！小编不易，如果有收获，微信打赏小编一杯娃哈哈单身狗的葵花宝典，撩妹必备，敬请期待！
