學習electron-vue

原鏈接：https://molunerfinn.com/electron-vue-1/#electron-vue%E5%AE%89%E8%A3%85

Toggle site

---

Catalog

You've read66%

1. 1. 前言
2. 2. 說明
3. 3. Electron簡要介紹
4. 4. electron-vue的簡要介紹
5. 5. electron-vue安裝
6. 6. 總結

MARKSZのBlog

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

 2018-01-11|Web開發

Word count: 2k|Reading time: 6 min

 

前言

前段時間，我用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. 開發插件系統——CLI部分
7. 開發插件系統——GUI部分
8. 想到再寫…

說明

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. 完善的文檔，清晰的項目結構。

大體的項目結構如下，根據選擇的不同設置結構會有所不同：

bash

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

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來安裝它的模板即可：

bash

1 2 3 4 5 6 7 8 9 10

# 如果你沒有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的開發，如果你對此有興趣不妨關注我的博客的進展。

Author: Molunerfinn

Link: https://molunerfinn.com/electron-vue-1/

Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.

前端VueElectronElectron-vue