前言
一直对PC桌面应用感兴趣，C++又玩不溜，但如果只通过前端技术就可以定制自己的PC桌面应用，想起来就很cool呀，还等什么，搞起来～
Electron是什么
一款跨平台的桌面应用，兼容Windows、Mac、Linux系统
可以理解为一个包了浏览器的壳，提供了浏览器+Node.js+框架API的运行环境，可以打开多个静态html脚本（或vue项目）
- 分为主进程和渲染进程
主进程是程序入口，提供了Node.js和Native API（框架）环境； 渲染进程提供了浏览器环境，负责加载页面，完成业务逻辑，可以在主进程同时打开多个渲染进程；
优点
- 跨平台开发
- 老项目接入成本低
- 无需部署web静态服务器
- 平台统一使用Chromium内核，无兼容问题
缺点
- 内存占用大 空内容打包，体积也不小。
- 交互效果比原生（C++）差 内容仍为H5
环境配置
- 安装Node.js 到官网安装LTS版本即可（例如12.18.3）
- 设置淘宝镜像
npm config set registry http://registry.npm.taobao.org/
yarn config set registry http://registry.npm.taobao.org/
- 安装 @vue/cli
快速上手
# 克隆示例项目的仓库
$ git clone https://github.com/electron/electron-quick-start
# 进入这个仓库
$ cd electron-quick-start
# 安装依赖并运行
$ npm install && npm start
// （注意，第一次下载时间较长，若不想等待，也可以修改包的源地址解决）
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
预览效果如下，内部页面为简单的html页面。
同理，也可以放入提前写好的任何PC端html页面，比如React、Vue的页面，但直接丢进去，并不优雅。
如何在Vue项目中轻松愉快地接入Electron
vue脚手架3.0的插件vue-cli-plugin-electron-builder 帮助vue脚手架直接引入Electron的依赖,并生成相关文件和配置 （注意：vue-electron应用的是vue/cli2.0版本，已经淘汰了）
-
先看效果图
如图，打开了一个基础的vue项目
-
1.安装插件
在vue项目文件夹执行以下指令,打开vue脚手架图形化界面
vue ui
进入插件
** 注意：安装完成后，必须点击"安装完成"按钮，否则项目可能出问题 **
脚手架的变动如下：
在主进程入口background.js文件处理主进程逻辑，包括：
1.打开默认的渲染进程（窗口）
2.与渲染进程（窗口）通信，转发消息
3.控制渲染进程（窗口）的行为
4.控制应用的生命周期
5.生成应用的菜单、快捷键操作
6.应用程序在线更新（juejin.cn/post/684490…
7.发起http请求
8.断网处理
准备就绪，执行指令打开应用吧
npm run electron:serve
相关问题
关于浏览器内核，可以在【主进程】中查看浏览器内核版本
process.versions.chrome
主进程与渲染进程（窗口）之间如何通信
注：渲染进程之间，也是通过主进程转发通知的
关于多个渲染进程之间，如何同步数据的问题
vuex-electron插件 通过拦截所有渲染进程（窗口）内状态机实例的action、mutation提交，把数据同步到主进程进行管理，这里注意，所有的action、mutation方法块内的执行环境，都是主进程 不建议在状态机API进行渲染进程（窗口）间的直接通信和交互操作。
1.安装依赖
yarn install vuex-electron
// 或
npm install vuex-electron
2.如何使用该插件
import Vue from "vue"
import Vuex from "vuex"
import { createPersistedState, createSharedMutations } from "vuex-electron"
Vue.use(Vuex)
export default new Vuex.Store({
// ...
plugins: [
createPersistedState(),
createSharedMutations()
],
// ...
})
如果打包失败
出现electron-builder 打包时遇到 cannot move downloaded into final location （或者无法下载文件）,请关闭杀毒软件
在线更新
有兴趣可以了解一下在线更新
自动化测试
有兴趣可以了解一下
https://www.electronjs.org/docs/tutorial/using-selenium-and-webdriver
https://www.electronjs.org/docs/tutorial/automated-testing-with-a-custom-driver
END
