electron是一个应用非常广泛并且功能强大的跨平台桌面开发工具，electron免费版集成了Node.js、Chromium以及V8，使用户可以直接使用html、css以及JavaScript编写跨平台桌面应用，可谓是方便至极。
电子使用铬和节点。js所以你可以建立你的应用程序使用HTML,CSS和JavaScript。
开源
电子是一个开源项目维护的GitHub,一个活跃的社区贡献者。
跨平台的
兼容Mac、Windows和Linux,电子应用程序构建和运行在三个平台。
2、它允许开发者专注于核心功能，它去负责软件开发中复杂的部分。
3、它为桌面应用提供了多种核心功能，例如自动更新、崩溃报告、安装器创建工具和一些具体的系统功能。
4、内置的MVC，完全支持Chrome平台。
5、Electron使用 web页面作为它的GUI，所以你能把它看作成一个被JavaScript控制的，精简版的Chromium浏览器。
6、在Electron里，运行package.json里main脚本的进程被称为主进程，在主进程运行的脚本可以以创建web页面的形式展示GUI。
2、cmd下输入：npm install electron-prebuilt -g
3、解压这个文件，然后双击exe
4、创建一个文件夹，里面创建三个文件
package.json，main.js，index.html
内容：
package.json
{
"name": "your-app",
"version" : "0.1.0",
"main": "main.js"
}
main.js
const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
然后将整个文件夹，拖到Electron.exe中，显示效果如下图所示：
部署electron开发环境。
在github上下载最新版的elecctron开发包，目录结构如下图，electron的业务代码写在resources文件夹下的app文件夹内。
初始化app文件夹。
①在app根目录下执行“npm install”指令，安装开发依赖。
②新建package.json和main.js，并在package.json中指定入口为main.js。
在main文件夹下建立Vue应用。
在github上下载Vue.js，或者直接在main文件夹下执行“npm install vue”。
编写App.vue文件。
现在App.vue就是我们整个项目的主文件，它控制着项目首页，因为Vue项目本身就适合单页面程序开发，所以这也是很多人把electron+vue作为技术栈的原因。
运行项目。
选择调试引擎Electron Main进行调试，注意launch.json中的"protocol"需要配置为 "inspector"，否则会报错。
二、快速打包electron应用程序
打包的基本命令如下
electron-packager ./ my-app --platform=win32 --arch=x64 --out=myout --electron-version=1.8.1
复杂点的打包命令
electron-packager . appName --platform=win32 --arch=x64 --download.mirror=https://npm.taobao.org/mirrors/electron/ --electron-version=1.4.2 --asar --app-version=6.6.6 --build-version=7777 --out=outName --overwrite --no-package-manager --ignore="(.git|node_modules)"
打包演示如下
答： 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模块。
2、增加了调试分析功能
3、解决了一些格式上的已知问题
4、修复了一些bug，优化了软件界面
5、优化了软件性能
【基本介绍】
electron免费版是一款Github上的跨平台桌面应用开发工具，支持Web技术开发桌面应用开发，electron免费版是基于C++开发的，GUI核心源于Chrome，而JavaScript引擎使用v8，是一款当前使用十分广泛的开发工具之一。【官方介绍】
Electron是一个开源的跨平台开发框架，整合了Node.js、Chromium和V8，让开发者可以使用HTML、CSS和JavaScript编写跨平台桌面应用，使用Electron开发的应用不仅可以在Windows、Linux以及Mac平台下运行，还拥有自动更新、崩溃报告、调试分析等功能，目前微软、Stack和Docker等多家公司都在使用Electron。【特色介绍】
网络技术电子使用铬和节点。js所以你可以建立你的应用程序使用HTML,CSS和JavaScript。
开源
电子是一个开源项目维护的GitHub,一个活跃的社区贡献者。
跨平台的
兼容Mac、Windows和Linux,电子应用程序构建和运行在三个平台。
【功能介绍】
1、它依赖于每一个Web开发者都已经熟知的Web标准，让你可以用它编写桌面软件。2、它允许开发者专注于核心功能，它去负责软件开发中复杂的部分。
3、它为桌面应用提供了多种核心功能，例如自动更新、崩溃报告、安装器创建工具和一些具体的系统功能。
4、内置的MVC，完全支持Chrome平台。
5、Electron使用 web页面作为它的GUI，所以你能把它看作成一个被JavaScript控制的，精简版的Chromium浏览器。
6、在Electron里，运行package.json里main脚本的进程被称为主进程，在主进程运行的脚本可以以创建web页面的形式展示GUI。
【安装步骤】
1、在起点软件园下载node.js，然后安装。2、cmd下输入：npm install electron-prebuilt -g
3、解压这个文件，然后双击exe
4、创建一个文件夹，里面创建三个文件
package.json，main.js，index.html
内容：
package.json
{
"name": "your-app",
"version" : "0.1.0",
"main": "main.js"
}
main.js
const electron = require('electron');
// Module to control application life.
const {app} = electron;
// Module to create native browser window.
const {BrowserWindow} = electron;
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
function createWindow() {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600});
// and load the index.html of the app.
win.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
win.webContents.openDevTools();
// Emitted when the window is closed.
win.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
win = null;
});
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win === null) {
createWindow();
}
});
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</body>
</html>
然后将整个文件夹，拖到Electron.exe中，显示效果如下图所示：
【使用方法】
一、electron vue开发项目教程部署electron开发环境。
在github上下载最新版的elecctron开发包，目录结构如下图，electron的业务代码写在resources文件夹下的app文件夹内。
初始化app文件夹。
①在app根目录下执行“npm install”指令，安装开发依赖。
②新建package.json和main.js，并在package.json中指定入口为main.js。
在main文件夹下建立Vue应用。
在github上下载Vue.js，或者直接在main文件夹下执行“npm install vue”。
编写App.vue文件。
现在App.vue就是我们整个项目的主文件，它控制着项目首页，因为Vue项目本身就适合单页面程序开发，所以这也是很多人把electron+vue作为技术栈的原因。
运行项目。
选择调试引擎Electron Main进行调试，注意launch.json中的"protocol"需要配置为 "inspector"，否则会报错。
二、快速打包electron应用程序
打包的基本命令如下
electron-packager ./ my-app --platform=win32 --arch=x64 --out=myout --electron-version=1.8.1
复杂点的打包命令
electron-packager . appName --platform=win32 --arch=x64 --download.mirror=https://npm.taobao.org/mirrors/electron/ --electron-version=1.4.2 --asar --app-version=6.6.6 --build-version=7777 --out=outName --overwrite --no-package-manager --ignore="(.git|node_modules)"
打包演示如下
【常见问题】
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模块。
【更新日志】
1、增加了MVC模式控制类型2、增加了调试分析功能
3、解决了一些格式上的已知问题
4、修复了一些bug，优化了软件界面
5、优化了软件性能