1.Electron是什么
借用官网截图，如上
中文文档：www.electronjs.org/docs
使用 Web 技术来编写 UI，用 chrome 浏览器内核来运行
使用 NodeJS 来操作文件系统和发起网络请求
使用 NodeJS C++ Addon 去调用操作系统的 native API（juejin.cn/post/684490…
Electron中有主进程和渲染进程
1.1 主进程
- Electron 运行 package.json 的 main 脚本的进程被称为主进程
- 每个应用只有一个主进程
- 管理原生 GUI，典型的窗口（BrowserWindow、Tray、Dock、Menu）
- 创建渲染进程
- 控制应用生命周期（app）
1.2 渲染进程
- 展示 Web 页面的进程称为渲染进程
- 通过 Node.js、Electron 提供的 API 可以跟系统底层打交道
- 一个 Electron 应用可以有多个渲染进程
2.一个简单的Electron项目
一个简单的项目最少包含三个文件，package.json，main.js，index.html。
其中，package.json里包含项目信息外，还包含入口文件main.js。
main.js中创建了一个窗口，并且load index.html文件。真实项目中，我们很少去直接初始化原始项目。下面介绍Electron如何与Vue结合
3.Electron + Vue
Electron与Vue一起使用目前常用有两种方式
3.1 Electron-vue
利用Electron-vue来初始化项目：
vue init simulatedgreg/electron-vue electron-vue
初始化完项目目录如截图，目录结构比较清晰，包含模板渲染，主进程代码，render进程代码，能够在electron-vue初始化完的代码上直接进行开发。
不过该代码依赖的electron版本较老。升级困难，可以参考其目录结构以及部分功能实现，不建议项目中直接使用。
3.2 Vue-cli + electron-builder
1.vue create vue-test
2.vue add electron-builder
该做法可以保证electron版本很新，而且开发模式与vue类似，可以在chrome浏览器中调试布局等功能。个人更喜欢这种模式
生成完代码以后，可以参考Electron-vue的目录结构对代码进行调整，如图 其中，代码中的preload.js可以定义render进程与main进程的通讯接口，如下图：
详细参考git代码：
对应参考代码：github.com/miwufe/vue-…
4.常用的开发桌面端比较
- Native(c++/c#/objective-c) 高性能，原生体验，包体积小，缺点：门槛高，迭代速度慢
- QT (基于C++) 跨平台【mac,windows,ios,android/linux,嵌入式】 高性能，媲美原生体验，缺点门槛高，迭代速度一般 ： DropBox WPS
- Flutter PC端还在发展中，基建少
- NW.js 跨平台,迭代快，Web 技术构建,源码加密、支持 Chrome 扩展,不错的社区 缺点：包体积大，性能一般
- Electron 跨平台 Web 技术构建 活跃的社区 大型应用案例 缺点：包体积大，性能一般
随着WebContainers的支持 xie.infoq.cn/article/b7f… 未来前端方向可折腾的东西也越来越多，electron未来可能也会退出舞台。
