vue + electron 开发桌面应用

vue + electron 开发桌面应用

简介

electron 是一个可以使用 web 技术来创建跨平台原生桌面应用的框架。借助 electron ，我们可以使用纯 JavaScript 来调用丰富的原生 APIs。优点：可以开发跨平台应用；成熟的社区；图形化的开发。缺点：应用体积过大；重型项目性能问题。

electron 核心的部分就是两个进程之间的协作------主进程和渲染进程。进程之间通过 ipcMain 和 ipcRenderer 来进行通信。
主进程：在 electron 里面，运行 package.json 里面 main 脚本的进程成为主进程。主进程控制整个应用的生命周期，在主进程中可以创建 Web 形式的 GUI，而且整个 Node API 是内置其中。
渲染进程：每个 electron 的页面都运行着自己的进程。

（以上图片截取自 vue-conf 2018 的分享，有兴趣的小伙伴可以点击查看）

引入 Vue

这里因为我自己习惯的框架是 Vue 所以选择使用 Vue。

electron-vue

Vue 和 electron结合起来并不是一件特别容易的事。为了方便 vue 开发者开发，出现了electron-vue，这个是 SimulatedGREG 参考 vue-cli2.0 的 webpack 模板骨架搭建的 electron 和 vue 结合的开发脚手架。

vue-cli-plugin-electron-builder

如果你想使用 vue-cli3.0 ，那么 vue-cli-plugin-electron-builder 是一个很好的选择，以插件话得方式构建 electron 应用，作者是 nklayman。（PS：简介里说自己16岁...看看人家再看看自己...）

开发

以上两种方式，前者有很多实际开发项目，后者这个月才刚刚推出1.0的正式版（不过作者更新、回复 Issues 的速度还是很快的）。具体项目创建就不详细说明了，官方文档给出的还是比较详细的。
如果使用 electron-vue 那么遇到下图这样的报错不要方，这个不影响使用。只不过作者认为这是 webpack 的问题没有处理而已。

稍微对比一下两种写法的差别，更便于选择适合自己的吧

electron-vue：主进程和渲染进程代码分别对应 main 文件夹和 render 文件夹。

vue-cli-plugin-electron-builder：正常使用 vue-cli3.0 创建项目，引入 vue-cli-plugin-electron-builder 插件。引入后会出现 background.js ，主进程相关代码在这里书写，就跟正常的 vue 项目没用什么区别。 vue-cli-plugin-electron-builder 使用的是 electron.build 工具进行的打包，如果你想要使用 electron-packager 进行打包，那么你只能使用 electron-vue 了。vue-cli-plugin-electron-builder demo 视频。

总结

electron 实际上就是一个 拥有 Node 和不同平台 APIs 支持的加强版 Chromium 浏览器。render 进程开发对于大部分前端都没有什么难度，main 进程的开发Umm...看看这一张图都装不下的 APIs 吧。Demo 使用的是 vue-cli-plugin-electron-builder 。

前端搬砖工一枚~只是简单的分享 electron 桌面应用的项目创建，没什么深度，想要自己学习的小伙伴还是自己去爬坑吧。
一行代码，多端运行~ 感觉还是个梦想~

--END--