使用 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... 。