原文首發於我的部落格，歡迎點選檢視獲得更好的閱讀體驗~
前言
前段時間，我用electron-vue開發了一款跨平臺（目前支援Mac和Windows）的免費開源的圖床上傳應用——PicGo，在開發過程中踩了不少的坑，不僅來自應用的業務邏輯本身，也來自electron本身。在開發這個應用過程中，我學了不少的東西。因為我也是從0開始學習electron，所以很多經歷應該也能給初學、想學electron開發的同學們一些啟發和指示。故而寫一份Electron的開發實戰經歷，用最貼近實際工程專案開發的角度來闡述。希望能幫助到大家。
預計將會從幾篇系列文章或方面來展開：
- electron-vue入門
- Main程式和Renderer程式的簡單開發
- 引入基於Lodash的json database——lowdb
- 跨平臺的一些相容措施
- 通過CI釋出以及更新的方式
- ...（想到再寫）
說明
PicGo是採用electron-vue開發的，所以如果你會vue，那麼跟著一起來學習將會比較快。如果你的技術棧是其他的諸如react、angular，那麼純按照本教程雖然在render端（可以理解為頁面）的構建可能學習到的東西不多，不過在main端（electron的主程式）應該還是能學習到相應的知識的。
Electron簡要介紹
一開始學習electron的時候，我被官網文件密密麻麻的概念所鎮住了：
概念太多，沒有辦法一下子接受。所以我自己學習完electron開發後，做了一張圖。來看看圖理解一下什麼是electron，以及它包括了啥：
圖解
electron由Node.js+Chromium+Native APIs構成。你可以理解成，它是一個得到了Node.js和基於不同平臺的Native APIs加強的Chromium瀏覽器，可以用來開發跨平臺的桌面級應用。
它的開發主要涉及到兩個程式的協作——Main（主）程式和Renderer（渲染）程式。簡單的理解兩個程式的作用：
- Main程式主要通過Node.js、Chromium和Native APIs來實現一些系統以及底層的操作，比如建立系統級別的選單，操作剪貼簿，建立APP的視窗等。
- Renderer程式主要通過Chromium來實現APP的圖形介面——就是平時我們熟悉的前端開發的部分，不過得到了electron給予的加強，一些Node的模組（比如fs）和一些在Main程式裡能用的東西（比如Clipboard）也能在Render程式裡使用。
- Main程式和Renderer程式通過
ipcMain和ipcRenderer來進行通訊。通過事件監聽和事件派發來實現兩個程式通訊，從而實現Main或者Renderer程式裡不能實現的某些功能。
進一步介紹
說完了electron的組成和需要我們開發的部分，來說說它的優缺點。
優點：
- 從上述介紹可以發現，除了不同平臺Native APIs不同以外，Node.js和Chromium都是跨平臺的工具，這也為electron生來就能做跨平臺的應用開發打下基礎。
- 開發圖形介面前所未有的容易——比起C#\QT\MFC等傳統圖形介面開發技術，通過前端的圖形化介面開發明顯更加容易和方便。得益於Chromium，這種開發模式得以實現。
- 成熟的社群、活躍的核心團隊，大部分electron相關的問題你可以在社群、github issues、Stack Overflow裡得到答案。開發的障礙進一步降低。
缺點：
- 應用體積過大。由於內部包裝了Chromium和Node.js，使得打包體積（使用
electron-builder）在mac上至少是45M+起步，在windows上稍微好一點，不過也要35M+起步。不過相比早期打包體積100M+起步來說，已經好了不少。不過解壓後安裝依然是100M+起步。 - 受限於Node.js和Native APIs的一些支援度的問題，它依然有所侷限。一些功能依然無法實現。比如無法獲取在系統資料夾裡選中的檔案，而必須呼叫web的File或者node的fs介面才可以訪問系統檔案。
- 應用效能依舊是個問題。所以做輕量級應用沒問題，重量級應用尤其是CPU密集型應用的話很是問題。
electron-vue的簡要介紹
由於我自己是Vue的技術棧，所以就想在electron裡使用vue。而vue只是在renderer程式裡使用的框架，不涉及到main程式。如下圖：
因此react、angluar以及其他的前端開發框架同樣適用。
不過想要做到把vue和electron結合起來並不是一件特別容易的事。為了方便開發，我使用的是electron-vue，這個是開發者SimulatedGREG參考vue-cli的webpack模板骨架搭建的electron和vue結合的開發腳手架。由於我對於vue-cli非常熟悉，所以上手electron-vue非常容易。相比很多其他的教程或者其他electron+前端開發框架的組裝方案，electron-vue給我感覺最好的是如下：
- 只有一個
package.json。而大部分其他的專案結構依然在使用兩個package.json來應對main程式和renderer程式的依賴庫。 - 內建完整的vue全家桶，省去再次配置vue-router和vuex的一些初期操作。
- 內建完整的webpack開發、生產等配置，開發環境舒適。
- 內建完整的開發、構建等
npm scripts，使用非常方便。 - 內建完整的Travis-ci、Appveyor配置指令碼，只需少數修改就能做到利用CI自動構建的應用釋出。
- 完善的文件，清晰的專案結構。
大體的專案結構如下，根據選擇的不同設定結構會有所不同：
my-project
├─ .electron-vue
│ └─ <build/development>.js files
├─ build
│ └─ icons/
├─ dist
│ ├─ electron/
│ └─ web/
├─ node_modules/
├─ src
│ ├─ main # 主程式
│ │ ├─ index.dev.js
│ │ └─ index.js
│ ├─ renderer # 渲染程式
│ │ ├─ components/
│ │ ├─ router/
│ │ ├─ store/
│ │ ├─ App.vue
│ │ └─ main.js
│ └─ index.ejs
├─ static/
├─ test
│ ├─ e2e
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ utils.js
│ ├─ unit
│ │ ├─ specs/
│ │ ├─ index.js
│ │ └─ karma.config.js
│ └─ .eslintrc
├─ .babelrc
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ package.json
└─ README.md
複製程式碼可以看到我們主要關注的兩個資料夾：src/main和src/renderer分別對應的是main程式和renderer程式。我們的開發大體上也是圍繞這兩個資料夾展開。
electron-vue安裝
參考electron-vue官方的文件給出的說明，搭建electron-vue的腳手架非常方便，使用vue-cli來安裝它的模板即可：
# 如果你沒有vue-cli的話需要全域性安裝
npm install -g vue-cli
# 然後使用vue-cli來安裝electron-vue的模板
vue init simulatedgreg/electron-vue my-project
# 安裝依賴
cd my-project
yarn # or npm install
# 進入開發模式
yarn run dev # or npm run dev
複製程式碼如果你是windows使用者，在安裝期間遇到了關於node-gyp、C++庫等方面的問題的話，請參考官方文件給出的解決辦法。
如果上述都沒有問題，那麼你將會看到如下介面：
總結
作為開篇，內容不多。不過把東西說清楚是必須的。對於electron開發其實是有兩種聲音的：
- 很簡單，不過就是web開發換了個殼
- 很難，需要了解很多原生的概念，不知道要怎麼入手
其實從本文介紹完，你應該要有一個粗略的認識。electron的開發其實包括了兩個部分，一個是main程式的相關開發，一個是renderer程式的相關開發。對於renderer程式的開發對於大多數前端開發人員來說不難。main程式的相關開發，如果你想要把electron的main程式的所以特性都學一遍、都用一遍，確實是需要不少時間的。不過如果是從需求出發，從工程本身的需要出發，那麼只需要用到的時候再去學習即可。不過要對Node.js能做到的事有個概念——它並不是萬能的。
下一篇文章將會正式開啟electron的開發，如果你對此有興趣不妨關注本系列的進展。