electron目前它已成为开源开发者、初创企业和老牌公司常用的开发工具，今天我就来带大家进入electron的大门
工具/原料
电脑
初识electron
1、 Electron是由谁开发的？答：Electron是由Github开发2.Electron是什么？答：Electron是一个用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库3.Electron把HTML，CSS和JavaScript组合的程序构建为跨平台桌面应用程序的原理是什么？答：原理为Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。4. Electron何时出现的，为什么会出现？Electron于2013年作为构建Atom的框架而被开发出来。这两个项目在2014春季开源。（Atom：为Github上可编程的文本编辑器）一些历史：2013年4月Atom Shell 项目启动。2014年5月Atom Shell 被开源。2015年4月Atom Shell 被重命名为 Electron。2016年5月Electron 发布了v1.0.0版本。5. Electron当前流行程度？目前Electron已成为开源开发者、初创企业和老牌公司常用的开发工具。6. Electron当前由那些人在维护支持？Electron当前由Github上的一支团队和一群活跃的贡献者维护。 有些贡献者是独立开发者，有些则在用Electron构建应用的大型公司里工作。7. Electron新版本多久发布一次？Electron的版本发布相当频繁。每当Chromium、Node.js有重要的bug修复，新API或是版本更新时Electron会发布新版本。一般Chromium发行新的稳定版后的一到两周之内，Electron中Chromium的版本会对其进行更新，具体时间根据升级所需的工作量而定。一般Node.js发行新的稳定版一个月后，Electron中Node.js的版本会对其进行更新，具体时间根据升级所需的工作量而定。8. Electron的核心理念是什么？Electron的核心理念是：保持Electron的体积小 和 可持续性开发。如：为了保持Electron的小巧 (文件体积) 和可持续性开发 (以防依赖库和API的泛滥) ，Electron限制了所使用的核心项目的数量。比如Electron只用了Chromium的渲染库而不是其全部组件。 这使得升级Chromium更加容易，但也意味着Electron缺少了Google Chrome里的一些浏览器相关的特性。添加到Electron的新功能应该主要是原生 API。 如果可以的话，一个功能应该尽可能的成为一个Node.js模块。9. Electron当前的最新版本为多少？Electron当前的最新版本为 2.0.0 （当前时间为2018年5月2号)
Electron如何安装?
1、方式一：通过npm进行安装通过那npm进行安装比较简单，但是要注意的是，npm是安装node时附带的包管理器，所以你需要先安装node,如果你没有安装的话，可参考我下面的另一篇文章
2、安装完node，就可以执行命令来安装electron了，如下：npm install electron -g提醒：如果通过npm来安装在国内可能比较慢，推荐安装cnpm，使用淘宝镜像来安装我们的electron.安装cnpm的命令如下：npm install -g cnpm –registry=https://registry.npm.taobao.org安装完成后可以输入cnpm -v 来查看是否安装成功，显示了版本号就代表成功了。用cnpm来安装electron和用npm来安装electron几乎没什么区别，就是把npm改为cnpm即可命令：cnpm install -g cnpm –registry=https://registry.npm.taobao.org当然，安装cnpm不是必须的，你也可以不安装cnpm，直接用npm来安装electon也行
3、方式二：通过下载electron压缩包来使用electron具体如何安装在我的另一篇文章中写的非常清楚，如下：
Electron如何使用？
1、Electron 应用的目录结构大体上，一个 Electron 应用的目录结构如下：electron-app/├── package.json├── main.js└── index.html即主要需要三个文件，下面来分别接收每个文件的作用：package.json //主要用来描述我们的electron项目的一些信息index.html //也就是我们的网页文件，也就是要用来打包为桌面应用的文件。main.js //用于创建窗口，把网页ui放到窗口里面来去，同时处理系统时间，
2、构建一个真一冶嚏型正的electron应用我们要依次创建package.json，index.html，main.js这三个文件首先来创建package.json文件，主要描述一些项目信息，基本代码如下：{ "name" : "electron-app","version" : "0.1.0","main" : "main.js"}name表示项目名称，version表示项目版本。main表示我们应用的启动脚本，它运行在主进程上（关于进程，文章末尾来讲，现在先不管他）注意：1. package.json文件的最后一个键值对的值不要在加逗号，不然会报错。这里也就是指【"main" : "main.js"】这个键值对。2.注如果main字段没有在package.json声明，Electron会优先加载index.js
3、然后我们开始创建main.js文件 ，用于创建窗口，把网页ui放到窗口里面来去，同时处理系统时间，代码如下：const e造婷用痃lectron = require('electron');const app = electron.app; // 控制应用生命周期的模块。const BrowserWindow = electron.BrowserWindow;// 创建原生浏览器窗口的模块// 保持一个对于 window 对象的全局引用，不然，当 JavaScript 被 GC，// window 会被自动地关闭var mainWindow = null;// 当所有窗口被关闭了，退出。app.on('window-all-closed', function() { // 在 OS X 上，通常用户在明确地按下 Cmd + Q 之前 // 应用会保持活动状态 if (process.platform != 'darwin') { app.quit(); }});// 当 Electron 完成了初始化并且准备创建浏览器窗口的时候// 这个方法就被调用app.on('ready', function() { // 创建浏览器窗口。 mainWindow = new BrowserWindow({width: 800, height: 600}); // 加载应用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打开开发工具 mainWindow.openDevTools(); // 当 window 被关闭，这个事件会被发出 mainWindow.on('closed', function() { // 取消引用 window 对象，如果你的应用支持多窗口的话， // 通常会把多个 window 对象存放在一个数组里面， // 但这次不是。 mainWindow = null; });});
4、最后我们来创建，index.html文件,即要显示的内容代码如下：<!DOCTYPE html><html> <head> <title>Hello World!</title> </head> <body> <h1>Hello World!</h1> We are using io.js <script>document.write(process.version)</script> and Electron <script>document.write(process.versions['electron'])</script>. </body></html>
5、ok,所需的必须文件全部创建
6、开始运行，运行主要又两种方式方式一：在你的项目electron-app目录下，打开cmd窗口，执行electron . 这样应该就能跑起来了如下图所示：
7、方式一：打开cmd窗口，输入electron，会弹出electron的窗体来，如下图所示，然后你复制下框中的electron.exe的路径，然后后面加一个空格在输入你的electron-app目录路径即可运行，在我的电脑上的命令如下，每个人的电脑上肯定都不一样：F:\installPackages\node-v9.9.0-win-x64\node_modules\electron\dist\electron.exe D:\webs\electron-app然后就运行起来了。注意：如果你是直接下载electron压缩文件来使用的话，可能弹出的框不太一样，你可以直接拖动main.js进入到electron的弹框里面就能运行。
如何将electron应用进行打包
1、 安装electron-packager进行打包cnpm installelectron-packager -g2. 在当前项目目录下执行打包命令electron-packager . appName --platform=win32 --arch=x64 --download.mirror=https://npm.taobao.org/mirrors/electron/ --electron-version=2.0.0 --asar --app-version=0.1.0 --build-version=0.1.0 --out=outName --overwrite --no-package-manager --ignore="(.git|node_modules)"3.执行此命令后会在当前项目目录下生成outName文件夹，打包而来的桌面应用就在这个文件夹里面。此时我们执行appName.exe就能运行这个桌面应用了如图所示：
2、如果你想具体的里了解这些打包的参数的话，那么阅读我的另一篇明文章，如下：
如何将elecron应用打包为安装包？
1、我们可以使用Grunt打包Electron,生成exe的安装包过程如下：1.新建一个package.json2. 安装grunt-electron-installercnpminstallgrunt-electron-installer--save-dev 3. 安装gruntcnpminstallgrunt--save-dev4.新建Gruntfile.js文件5.执行grunt进行打包
2、新建package.json文件，内容如下{ "name": "electron-app", "version": "0.1.0",}
3、 安装grunt-electron-installer执行命令：cnpminstallgrunt-electron-installer--save-dev
4、 安装grunt执行命令：cnpminstallgrunt-g && cnpminstallgrunt -D
5、新建Gruntfile.js文件代码如下：var grunt = require("grunt"); grunt.config.init({ pkg: grunt.file.readJSON('package.json'), 'create-windows-installer': { x64: { appDirectory: './appName-win32-x64', authors: 'zhanglu.', exe: 'appName.exe', description:"electron-app", } } }) grunt.loadNpmTasks('grunt-electron-installer'); grunt.registerTask('default', ['create-windows-installer']);
6、执行grunt进行打包为安装包 准备工作都完成之后，在outName目录下执行grunt就可以了（执行中，最好退出360，电脑管家，毒霸等软件，可能会造成干扰）打包完成后会在outName目录下生成installer文件夹，如下图：Setup.exe就是打包来的安装程序
7、ok,electron的入门教程，到此结束。