共计 3671 个字符，预计需要花费 10 分钟才能阅读完成。
之前有个需求，说是可能会用到 electron，于是稍微了解了一下，顺便做个记录。对于初学者而言，我最关心的往往不是这个框架的内核，而是我多久能打出 HelloWord，能不能满足业务需求，我投入的时间与我收获的东西等不等值（当然这一点毋庸置疑是不等值的????）？虽然对 electron 什么也不懂，没关系，上来就是萌新三连先百度一哈看看。
&01. 啥是 electron？
感谢 seo 优化逻辑，百度第一行这串字
使用 JavaScript, HTML 和 CSS 构建跨平台的桌面应用
就很好的解释了啥是 electron。什么？你还不懂？好吧，我也不懂但我看着解释一哈。
桌面应用就是针对于 pc 端的各种系统（win/mac/linux）的应用程序。就好像开发移动端的小程序一样，用前端语言模拟开发 Android/ios 应用，electron 能用前端语言开发 pc 端的应用。
electron 作为一种为前端开发者（或说是 js/html/css 语言的使用者）所开发的一种能用前端语言生成桌面应用的框架。你只需要要和往常一样编写你的前端代码，诸如布局样式，页面交互，数据处理，请求响应等等。而当你编写完成，下达了打包的命令后，electron 会帮你生成对应的桌面应用。也就是说，如果没什么细节的配置要求，你只管写你的前端代码，怎么生成桌面应用就是一句命令的事。
啥是 electron？
electron 是个框架，给它个命令，它能生成桌面应用，Over.
&02. 为啥用 electron？
贴一下之前整理的几点笔记：
简要
Electron 跨系统 开发框架
Electron 通过将 Chromium 和 Node.js 合并到同一个运行时环境中，并将其打包为 Mac，Windows 和 Linux 系统下的应用来实现这一目的。同时也支持跨平台开发，诸如移动端 APP, 小程序,H5 等，但适应性不及原生的跨平台开发框架(Weex,DCloud…)
框架特性
开源
客户端 vs 浏览器端（安全性，用户体验，本地工具 …）
适应多系统的运行环境
适应系统下原生的通讯联动（系统提示 / 任务栏常驻 / 崩溃监控 / 开机自启 …）
个人信息、操作日志的本地化数据库存储
适配部分 chrome 的 crx 扩展插件
打包文件大(几十兆，至少包含一个浏览器程序大小)，吃内存 ## 开发 ##
在 /src/renderer/ 渲染进程内 进行 vue 项目开发;vue 配套的工具插件 (axios,vuex,router…) 照常使用
一个主进程与多个渲染进程 模拟 多页面 / 多弹窗 的情景
Electron 版本发布相当频繁
Electron 不支持 Web Worker 多进程，使用 background process & 缓存机制
不同系统间存在部分 api 差异
自动更新 autoUpdater win&mac , 不支持 Linux
NeDB 嵌入式持久数据库 & 浏览器端缓存机制
使用 fs 操作系统文件
为啥用 electron？
不需要额外的编写，把原来写好的前端代码搬到 electron 对应渲染目录下即可，快速构建一个桌面应用，还能同时适配（并非百分百适配）三个操作系统，是网页服务端向 PC 应用端过渡的一个不错方案，Over.
&03. 怎么用 electron？
emm… 那我要怎么用呢？如果仅仅是知道了啥是 electron，那想真正玩起来还是蛮麻烦的，你可能还会遇到不少问题，还是要看不少博客文章，当然这都是正常的。
打开官网，快速浏览下网站，你会发现官网有一个快速入门的 demo。
我下过来看了一哈，感觉就真的是一个入门 demo，没啥特殊的。反倒是怎么把入门 demo 跑起来倒花了我点时间，因为 electron 的下载可能需要外网资源，所以会遇到安装失败的情况，解决办法就是使用 cnpm 淘宝镜像源。
//npm 安装 electron 要从国外下载一个 45MB 左右的 zip 包，
// 特别的慢（8KB…），所以我们可以采用下面的这条安装命令。
// 条安装命令会从淘宝的镜像站下载这个 zip 包，速度很快。
$ npm install electron -g –registry=http://registry.npm.taobao.org
// 当然你也可以使用 cnpm 来全局安装 electron
$ npm install cnpm -g –registry=http://registry.npm.taobao.org
$ cnpm install electron -g
你可以用 electron 白手起家，跟着 demo 自己边学边造一个工程出来；也可以在 demo 的基础上改改接着开发；或者呢找找看有没有脚手架之类的。
因为我之前是学习的 vue，所以看到 vue-cli + electron 的关键字后就感到特别亲切。
主要依赖 & 版本
“electron”: “^2.0.6”, // latest 4.0.3| beta 5.0.0 | nightly 6.0.0,
“vue”: “^2.5.16”,
“vue-cli”: “^2.9.6”,
“vue-electron”: “^1.0.6”,
“vue-router”: “^3.0.1”,
“vuex”: “^3.0.1”,
“vuex-electron”: “^1.0.0”,
“iview”: “^3.2.2”,
“axios”: “^0.18.0”
起步
P.S. vue-cli 为 2.0 版本
# 安装 vue-cli 和 脚手架样板代码
# 此模板依赖的 electron 默认为 ”^2.0.6″，需求高版本的可自行更改
npm install -g vue-cli vue init simulatedgreg/electron-vue my-project
# install dependencies
npm install
# serve with hot reload at localhost:9080
npm run dev
# build electron application for production
npm run build
# pack electron application
npm run pack
开发在 /src/renderer/ 目录下 进行 vue 项目开发打包结果会在 build 文件夹（还是 dist 来着具体我忘了）生成几个 exe 安装程序。把 exe 文件复制到桌面，安装并打开即可。
怎么用 electron？
使用 vue-cli 脚手架傻瓜式创建一个项目出来，并在 /src/renderer/ 目录下 进行 vue 项目开发, 开发之前先看看 Electron|API 里有没有贴合业务需求的，有就尽量拿来用，没有再自己写,Over.
&04.EX-electron 结语
即使我们什么都不写，一个空的 electron 工程打包完也有 20mb 左右的大小，我猜这是其内部浏览器的大小。
我们甚至可以说 electron 就是一个内部封装了一整个 chrome 的工程。它之所以能适配端系统，就是因为在三个系统上使用的都是同一个 chrome 浏览器的内核。
我们的 electron 开发视图也都是在这个内置的浏览器中显示，而不是我们常用的外部真实的浏览器，而且在这个内部浏览器中你也能使用开发者模式进行调试，使用 chrome 的大部分功能，同时又多了许多与操作系统交互的 api。
相当于本来写的项目需要做不同浏览器适配，现在用 electron 就可以只写 chrome 的适配（不用 IE！！！）。
然后原来是 直接在不定浏览器中访问的方式改成在一个提供且仅提供 chrome 浏览器功能的程序中访问业务。
当然，做窗口分辨率适配还是要的。你可以用它快速地搭建自己的桌面小应用。
最后，我们的需求是既要网页应用也可能要桌面应用，和上级沟通了一哈，选择了下面的第三种方案 A。
方案 C
├─── vue 本地开发 =>vue 生产发版 => 网页应用
│ ├── vue 迭代版本 ↑
│ ├── vue 外套 electron ↓
└─── electron 生产发版 => 桌面应用
** 一次迭代更新 vue&electron，两个都要重新发版静态文件。
方案 B
├─── vue 本地开发 =>vue 生产发版 => 网页应用 =>close
│ ├── vue 迭代版本 ↑
│ ├── vue 整体搬迁 electron ↓
│ ├── electron 内部开发 ↓
└─── electron 生产发版 => 桌面应用 => 桌面 & 网页应用
** 一次迭代更新 electron，需要时间搬迁原工程。
方案 A
├─── vue 本地开发 =>vue 生产发版 => 网页应用
│ └───vue 迭代版本 ↑
└─── electron 近空项目生产发版 => 桌面应用
**[打开程序后仅提供 vue 网页工程的网址访问，类似 electron 打开一个百度页面的程序窗口]
** 一次迭代更新 vue，Over.
End，因为对 electron 的业务需优先级不高，所以这个需求也先搁置下来了。我也没做更深入的研究，初识 electron 就到这了。
以后有时间的话可以用这个做个小程序玩玩。
参考链接
安装 | Electron
Electron | API- 目录
简介 -electron-vue
electron 两种打包
electron 入门心得
electron 学习历程
electron+webpack2+ 多入口配置
electron 去边框 & 可拖动
electron 打开新窗口
:::