Electron介绍
2014年7月，由新西兰政府和硅谷共同赞助的火箭实验室(Rocket Lab)宣布成功研制出名为“电子”（Electron）的小型卫星专用运载火箭。。。。
尴尬，，，百度百科是这样写的，然而我们接下来要入门的的不是这个，而是如何优雅的写一个客户端软件，就像GitHub 的 Atom ，微软的 Visual Studio Code都是使用Electron开发的。
步入正题 ，Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
环境准备
为了打造一个Electron桌面程序的开发环境，我们需要安装好Node.js、npm(建议搞成淘宝的镜像cnpm)、一个顺手的代码编辑器以及对你的操作系统命令行客户端有基本了解。
关于node和npm的安装，这里先不做介绍，可以自己去查询，建议安装新版本。
# 检查node版本
node -v
# 检查npm版本
npm -v
我的版本如下：
npm设置淘宝镜像：
# 1.这样配置以后npm install都是用淘宝的镜像下载资源
npm config set registry https://registry.npm.taobao.org
# 2.使用cnpm 代替npm,以后用的时候还可以用npm，如果想使用淘宝镜像下载，就用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
坑点：设置的时候以及使用的时候建议使用管理员方式打开cmd，不然很多地方会出现权限不足报错，比较恶心
创建应用
创建一个空文件夹 my-app:
管理员方式运行CMD，打开这个目录：
从开发的角度来看, Electron application 本质上是一个 Node. js 应用程序。 与 Node.js 模块相同，应用的入口是 package.json 文件。 一个最基本的 Electron 应用一般来说会有如下的目录结构：
my-app/
├── package.json
├── index.js
└── index.html
然后从该文件夹运行npm init，生成package.json：
npm init
接下来就会出现这么多东西，并提示你写项目名，描述，作者什么的一大堆东西，为了省事直接回车默认就行了：
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (my-app)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\electron\my-app\package.json:
{
"name": "my-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
然后就会有一个这样的文件生成了：
然后再scripts中添加/修改start为"electron ."
"scripts": {
"start": "electron ."
}
接下来安装electron：
# 你要是不设置淘宝镜像的话下载贼慢
cnpm install --save-dev electron
然后就会这样：
D:\electron\my-app>cnpm install --save-dev electron
√ Installed 1 packages
√ Linked 82 latest versions
[1/2] scripts.postinstall electron@8.2.0 › @electron/get@1.9.0 › global-agent@2.1.8 › core-js@^3.6.4 run "node -e \"try{require('./postinstall')}catch(e){}\"", root: "D:\\electron\\my-app\\node_modules\\_core-js@3.6.4@core-js"
Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!
The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
[1/2] scripts.postinstall electron@8.2.0 › @electron/get@1.9.0 › global-agent@2.1.8 › core-js@^3.6.4 finished in 218ms
[2/2] scripts.postinstall electron@* run "node install.js", root: "D:\\electron\\my-app\\node_modules\\_electron@8.2.0@electron"
√ Run 2 scriptsstinstall electron@* finished in 6s
deprecate electron@8.2.0 › extract-zip@1.7.0 › mkdirp@^0.5.4 Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
Recently updated (since 2020-03-23): 4 packages (detail see file D:\electron\my-app\node_modules\.recently_updates.txt)
√ All packages installed (87 packages installed from npm registry, used 8s(network 2s), speed 125.68kB/s, json 83(216.68kB), tarball 0B)
看下my-app目录，就会多一个node_modules：
接下来创建index.js：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// 加载index.html文件
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
最后，创建你想展示的 index.html：
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
<h1>Hello World!</h1>
<p>这是我的第一个app，哈哈</p>
</body>
</html>
最最最后，执行命令启动 npm start：
npm start
完成啦，你会看到弹出来一个程序，这就是你的hello world：
打包生成exe程序
最最最最最后，当然是打包生成可以点击就执行的程序咯，找一个自己喜欢的ico当做app图标，放到根目录下：
然后执行:
electron-packager . app --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
electron-packager <location of project> <name of project> <platform> <architecture> <electron version> <optional options>
参数说明：
* location of project：项目所在路径
* name of project：打包的项目名字
* platform：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）
* architecture：决定了使用 x86 还是 x64 还是两个架构都用
* electron version：electron 的版本
* optional options：可选选项
执行这个的时候特别的慢，因为镜像的问题，因为下载源默认的还是是github，所以设置一下：
set ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
# 8.2.0是我的版本号
set ELECTRON_CUSTOM_DIR=8.2.0
然后再执行，这样就比较快了：
electron-packager . app --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打开my-app目录，你会发现多了一个out文件夹：
OK，您的hello world以及打包成功，请查收
下一步，我们一起来使用vue和饿了么来一下写界面
看下以及完成的作品吧:
我只是一个业余的前端，可能有地方写的不准确，只是写服务端写的太无聊了，不是看不完的日志就是处理不完的数据，偶尔写点这些东西还是挺有意思的。
有不懂的地方或者其他问题请联系我: http://litao1104.cn/
