使用 electron-vue 构建你的桌面应用

什么是 electron

官网里这么说：Electron提供了一个Nodejs的运行时，专一于构建桌面应用，同时使用web页面来做为应用的GUI，你能够将其看做是一个由JavaScript控制的迷你版的Chromium浏览器。

翻译一下：它是一个运行时，能够像 node 同样这样执行：electron app.js；也是一个使用 html + css + javascript 构建跨平台原生桌面应用的框架。

本质上，electron 就是一个带了 Chrome 浏览器的壳子（无需考虑兼容性的问题）。

Electron用 web 页面做为它的 GUI，而不是绑定了 GUI 库的 JavaScript。它结合了 Chromium、Node.js 和用于调用操做系统本地功能的 APIs（如打开文件窗口、通知、图标等）。

具备两个进程，分别是主进程，以及渲染进程。

• 主进程：运行 package.json 里面 main 脚本的进程成为主进程。
• 渲染进程： 每一个 electron 的页面都运行着本身的进程，称为渲染进程。

主进程也就是 npm run start 出来的窗口，咱们关心的，仍是窗口里面的内容，便是渲染进程。

electron-vue

electron-vue 是一个结合 vue-cli 与 electron 的项目，主要避免了使用 vue 手动创建起 electron 应用程序，很方便。

咱们须要作的仅仅是像日常初始化一个 vue-cli 项目同样

vue init simulatedgreg/electron-vue my-project

就能够拥有一个 vue-loader 的 webpack、electron-packager 或是 electron-builder，以及一些最经常使用的插件，如vue-router、vuex 等等的脚手架。

下图是个人 blog 结合 electron-vue 的目录：

src 里的 main，便是主进程，而咱们须要关心的则仅有 renderer 渲染进程。（ main 进程里，添加了经常使用菜单栏的功能）。

打包发布

打包发布有两种方式：

• electron-packager，打包方式比较简单，想为哪一个平台打包，执行相应命令便可。

• electron-builder，自动化部署，持续集成，只要监测到 github 上绑定的代码仓库发生了变化，便可打包发布。挺高大上的。配置有一点麻烦，感兴趣的同窗，能够参考这个 https://simulatedgreg.gitbook... ；

结语

上手很愉快的。

electron 中文文档： https://github.com/electron/e...

这有一个栗子：https://github.com/jkchao/vue... 。