Electron-vue開發實戰0——Electron-vue入門

原文首發於個人博客，歡迎點擊查看得到更好的閱讀體驗~

前言

前段時間，我用electron-vue開發了一款跨平臺（目前支持Mac和Windows）的免費開源的圖牀上傳應用——PicGo，在開發過程當中踩了很多的坑，不只來自應用的業務邏輯自己，也來自electron自己。在開發這個應用過程當中，我學了很多的東西。由於我也是從0開始學習electron，因此不少經歷應該也能給初學、想學electron開發的同窗們一些啓發和指示。故而寫一份Electron的開發實戰經歷，用最貼近實際工程項目開發的角度來闡述。但願能幫助到你們。

預計將會從幾篇系列文章或方面來展開：

1. electron-vue入門
2. Main進程和Renderer進程的簡單開發
3. 引入基於Lodash的json database——lowdb
4. 跨平臺的一些兼容措施
5. 經過CI發佈以及更新的方式
6. ...（想到再寫）

說明

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（渲染）進程。簡單的理解兩個進程的做用：

1. Main進程主要經過Node.js、Chromium和Native APIs來實現一些系統以及底層的操做，好比建立系統級別的菜單，操做剪貼板，建立APP的窗口等。
2. Renderer進程主要經過Chromium來實現APP的圖形界面——就是平時咱們熟悉的前端開發的部分，不過獲得了electron給予的增強，一些Node的模塊（好比fs）和一些在Main進程裏能用的東西（好比Clipboard）也能在Render進程裏使用。
3. Main進程和Renderer進程經過ipcMain和ipcRenderer來進行通訊。經過事件監聽和事件派發來實現兩個進程通訊，從而實現Main或者Renderer進程裏不能實現的某些功能。

進一步介紹

說完了electron的組成和須要咱們開發的部分，來講說它的優缺點。

優勢：

1. 從上述介紹能夠發現，除了不一樣平臺Native APIs不一樣之外，Node.js和Chromium都是跨平臺的工具，這也爲electron生來就能作跨平臺的應用開發打下基礎。
2. 開發圖形界面史無前例的容易——比起C#\QT\MFC等傳統圖形界面開發技術，經過前端的圖形化界面開發明顯更加容易和方便。得益於Chromium，這種開發模式得以實現。
3. 成熟的社區、活躍的核心團隊，大部分electron相關的問題你能夠在社區、github issues、Stack Overflow裏獲得答案。開發的障礙進一步下降。

缺點：

1. 應用體積過大。因爲內部包裝了Chromium和Node.js，使得打包體積（使用electron-builder）在mac上至少是45M+起步，在windows上稍微好一點，不過也要35M+起步。不過相比早期打包體積100M+起步來講，已經好了很多。不過解壓後安裝依然是100M+起步。
2. 受限於Node.js和Native APIs的一些支持度的問題，它依然有所侷限。一些功能依然沒法實現。好比沒法獲取在系統文件夾裏選中的文件，而必須調用web的File或者node的fs接口才能夠訪問系統文件。
3. 應用性能依舊是個問題。因此作輕量級應用沒問題，重量級應用尤爲是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給我感受最好的是以下：

1. 只有一個package.json。而大部分其餘的項目結構依然在使用兩個package.json來應對main進程和renderer進程的依賴庫。
2. 內建完整的vue全家桶，省去再次配置vue-router和vuex的一些初期操做。
3. 內建完整的webpack開發、生產等配置，開發環境溫馨。
4. 內建完整的開發、構建等npm scripts，使用很是方便。
5. 內建完整的Travis-ci、Appveyor配置腳本，只需少數修改就能作到利用CI自動構建的應用發佈。
6. 完善的文檔，清晰的項目結構。

大致的項目結構以下，根據選擇的不一樣設置結構會有所不一樣：

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開發實際上是有兩種聲音的：

1. 很簡單，不過就是web開發換了個殼
2. 很難，須要瞭解不少原生的概念，不知道要怎麼入手

其實從本文介紹完，你應該要有一個粗略的認識。electron的開發其實包括了兩個部分，一個是main進程的相關開發，一個是renderer進程的相關開發。對於renderer進程的開發對於大多數前端開發人員來講不難。main進程的相關開發，若是你想要把electron的main進程的因此特性都學一遍、都用一遍，確實是須要很多時間的。不過若是是從需求出發，從工程自己的須要出發，那麼只須要用到的時候再去學習便可。不過要對Node.js能作到的事有個概念——它並非萬能的。

下一篇文章將會正式開啓electron的開發，若是你對此有興趣不妨關注本系列的進展。