1.关于Electron
Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。
为了保持Electron的小巧(文件体积)和可持续性开发(以防依赖库和API的泛滥)，Electron限制了所使用的核心项目的数量。比如Electron只用了Chromium的渲染库而不是其全部组件。这使得升级Chromium更加容易，但也意味着Electron缺少了GoogleChrome里的一些浏览器相关的特性。添加到Electron的新功能应该主要是原生API。如果可以的话，一个功能应该尽可能成为一个Node.js模块。
2.开发环境
可以使用原生的Node.js开发环境来开发Electron应用。为了打造一个Electron桌面程序的开发环境，你只需要安装好Node.js、npm、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。我们以比较常见的windows开发环境（win7以上）为例：
首先，安装最新版本的node.js。推荐安装最新的长期支持的版本。在安装过程中的配置界面请勾选node.jsruntime、npmpackagemanager和addtopath这三个选项。可通过以下命令来确认node和npm已经安装完成。
3.打造一个简单的Electron应用
Electron可以让你使用纯JavaScript调用丰富的原生(操作系统)APIs来创造桌面应用。你可以把它看作一个Node.js的变体，它专注于桌面应用而不是Web服务器端。这不意味着Electron是某个图形用户界面（GUI）库的JavaScript版本。相反，Electron使用web页面作为它的GUI，所以你能把它看作成一个被JavaScript控制的，精简版的Chromium浏览器。
从开发的角度来看,Electronapplication本质上是一个Node.js应用程序。与Node.js模块相同，应用的入口是package.json文件。一个最基本的Electron应用一般来说会有如下的目录结构：
your-app/├──package.json├──main.js└──index.html
为你的新Electron应用创建一个新的空文件夹。打开你的命令行工具，然后从该文件夹运行npminit
npm会帮助你创建一个基本的package.json文件。其中的main字段所表示的脚本为应用的启动脚本，它将会在主进程中执行。如下片段是一个package.json的示例：
{"name":"demo","version":"1.0.0","description":"test","main":"index.js","scripts":{"test":"echo\"Error:notestspecified\"exit1"},"author":"","license":"ISC"}
注意：如果main字段没有在package.json中出现，那么Electron将会尝试加载index.js文件（就像Node.js自身那样）。如果你实际开发的是一个简单的Node应用，那么你需要添加一个start脚本来指引node去执行当前的package,把这个Node应用转换成一个Electron应用也是非常简单的，我们只不过是把node运行时替换成了electron运行时。
{"name":"demo","version":"1.0.0","description":"test","main":"index.js","scripts":{"start":"electron."},"author":"","license":"ISC"}
4.开发一个简单的electron
Electronapps使用JavaScript开发，其工作原理和方法与Node.js开发相同。electron模块包含了Electron提供的所有API和功能，引入方法和普通Node.js模块一样。
electron模块所提供的功能都是通过命名空间暴露出来的。比如说：electron.app负责管理Electron应用程序的生命周期，electron.BrowserWindow类负责创建窗口。下面是一个简单的main.js文件，它将在应用程序准备就绪后打开一个窗口。
您应当在main.js中创建窗口，并处理程序中可能遇到的所有系统事件。下面我们将完善上述例子，添加以下功能：打开开发者工具、处理窗口关闭事件、在macOS用户点击dock上图标时重建窗口，添加后，main.js就像下面这样：
const{app,BrowserWindow}=require(electron)functioncreateWindow(){//创建浏览器窗口constwin=newBrowserWindow({width:,height:,webPreferences:{nodeIntegration:true}})//并且为你的应用加载index.htmlwin.loadFile(index.html)//打开开发者工具win.webContents.openDevTools()}//ThismethodwillbecalledwhenElectronhasfinished//initializationandisreadytocreatebrowserwindows.//部分API在ready事件触发后才能使用。app.whenReady().then(createWindow)//Quitwhenallwindowsareclosed.app.on(window-all-closed,()={//在macOS上，除非用户用Cmd+Q确定地退出，//否则绝大部分应用及其菜单栏会保持激活。if(process.platform!==darwin){app.quit()}})app.on(activate,()={//在macOS上，当单击dock图标并且没有其他窗口打开时，//通常在应用程序中重新创建一个窗口。if(BrowserWindow.getAllWindows().length===0){createWindow()}})//Inthisfileyoucanincludetherestofyourappsspecificmainprocess//code.也可以拆分成几个文件，然后用require导入。
5.启动应用
在创建并初始化完成main.js、index.html和package.json之后，您就可以在当前工程的根目录执行npmstart命令来启动刚刚编写好的Electron程序了。