Electron入门教程
1、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号)
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
具体如何安装在我的另一篇文章中写的非常清楚，如下：
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 electron = 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的弹框里面就能运行。
1、1. 安装electron-packager进行打包
cnpm install electron-packager -g
2. 在当前项目目录下执行打包命令
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、如果你想具体的里了解这些打包的参数的话，那么阅读我的另一篇明文章，如下：
1、我们可以使用Grunt打包Electron,生成exe的安装包
过程如下：
1. 新建一个package.json
2. 安装grunt-electron-installer
cnpm install grunt-electron-installer --save-dev
3. 安装grunt
cnpm install grunt --save-dev
4. 新建Gruntfile.js文件
5. 执行grunt进行打包
2、1.新建package.json文件，内容如下
{
"name": "electron-app",
"version": "0.1.0",
}
3、2. 安装grunt-electron-installer
执行命令：cnpm install grunt-electron-installer --save-dev
4、3. 安装grunt
执行命令：cnpm install grunt -g && cnpm install grunt -D
5、4. 新建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、5. 执行grunt进行打包为安装包
准备工作都完成之后，在outName目录下执行grunt就可以了
（执行中，最好退出360，电脑管家，毒霸等软件，可能会造成干扰）
打包完成后会在outName目录下生成installer文件夹，如下图：
Setup.exe就是打包来的安装程序
7、ok,electron的入门教程，到此结束。