0.Electron是什么简介 | Electron
简单来说就是一个基于Chrome+Nodejs的容器，可以用纯前端的方式实现跨平台的桌面应用开发。代码由js，css，html构成，它支持把整个项目编译成exe。由于它支持Nodejs，所以可以引用dll，那么技术上涉及到跟硬件打交道的事情可以用c#，c++来开发，做成dll再有Nodejs去调用。所以我们可以把electron当作一个快速开发业务逻辑和界面逻辑的手段。底层核心可以用c++做，大大提高了开发效率。
1.下载nodejs 64位
安装好后，cmd输入 node -V查看到版本说明安装好了。
2.安装vscode
这个没啥好说的，直接安装Visual Studio Code - Code Editing. Redefined
3.创建项目文件夹
创建一个空的项目文件夹，我用的这个D:\codes\myCode\Electron-test
在文件夹下新增一个app文件夹用于存放代码
4.下载安装electron
在D:\codes\myCode\Electron-test路径下以管理员身份运行cmd
设置npm使用淘宝镜像
npm install cnpm -g --registry=https://registry.npm.taobao.org
安装electron
在D:\codes\myCode\Electron-test路径下输入
cnpm install electron --save-dev
完成后查看electron版本
npx electron -v
此时项目文件夹里面会多出一个node_modules文件夹和package.json文件
5.初始化项目
在vscode中，在项目根目录创建一个package.json空白文件
在vscode中，选择“终端”-->"新建终端"
vscode下方会出现终端，这个“终端”其实就是cmd。
在项目文件夹下 D:\codes\myCode\Electron-test “终端”输入cnpm init 对项目进行配置
cnpm init后会逐条让输入 package name（项目名称），version（版本号），description（项目描述），entry point（项目启动的js位置）其他的都用管了，直接回车。最后会问自动生成的文件你是否ok，ok输入yes他就自动生成package.json文件内容。
生成好了结果如下：
6.创建主程序入口index.js
在app文件夹下面创建index.js 里的代码如下：
// ./app/index.js
//采用javascript严格模式
'use strict';
// 应用的控制模块
const electron = require('electron');
const app = electron.app;
// 创建原生浏览器窗口的模块
const BrowserWindow = electron.BrowserWindow;
var mainWindow = null;
// 当所有窗口都关闭的时候退出应用
app.on('window-all-closed', function () {
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();
// 窗口关闭时触发
mainWindow.on('closed', function () {
// 想要取消窗口对象的引用，如果你的应用支持多窗口，
// 通常你需要将所有的窗口对象存储到一个数组中，
// 在这个时候你应该删除相应的元素
mainWindow = null;
});
});7.创建主窗体index.html
在app文件夹中创建index.html，代码如下
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Word</title>
<body>
<h1>Hello Word!</h1>
<h1>Hello，Electron！</h1>
<div style="width: 200px; height:40px; background-color: bisque;">
你好我的朋友！
</div>
</body>
</html>8.编译运行
安装gulp。
命令cnpm install -save-dev gulp
安装好后，在项目根目录下创建一个gulpfile.js文件，其代码如下：
// 获取依赖
var gulp = require('gulp'),
childProcess = require('child_process'),
electron = require('electron');
// 创建 gulp 任务
gulp.task('run_Electron-test', function () {
childProcess.spawn(electron, ['.'], { stdio: 'inherit' });
});命令输入 gulp run_Electron-test
