簡介

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--