Vue+Electron開發跨平臺桌面應用

前言

雖然 B/S 是目前開發的主流，可是 C/S 仍然有很大的市場需求。受限於瀏覽器的沙盒限制，網頁應用沒法知足某些場景下的使用需求，而桌面應用能夠讀寫本地文件、調用更多系統資源，再加上 Web 開發的低成本、高效率的優點，這種跨平臺方式愈來愈受到開發者的喜好。

Electron 是一個基於 Chromium 和 Node.js，使用 HTML、CSS 和 JavaScript 來構建跨平臺應用的跨平臺開發框架，兼容 Mac、Windows 和 Linux。目前，Electron 已經建立了包括 VScode 和 Atom 在內的大量應用。

環境搭建

建立 Electron 跨平臺應用以前，須要先安裝一些經常使用的工具，如 Node、vue 和 Electron 等。

安裝 Node

進入 Node 官網下載頁 http://nodejs.cn/download/，而後下載對應的版本便可，下載時建議下載穩定版本。若是安裝 Node 使用 Homebrew 方式，建議安裝時將 npm 倉庫鏡像改成淘寶鏡像，以下所示。

npm config set registry http://registry.npm.taobao.org/
或者
npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝/升級 vue-cli

先執行如下命令，確認下本地安裝的 vue-cli 版本。

vue -V

若是沒有安裝或者不是最新版，能夠執行如下命令安裝/升級。

npm install @vue/cli -g

安裝 Electron

使用以下命令安裝 Electron 插件。

npm install -g electron
或者
cnpm install -g electron

爲了驗證是否安裝成功，可使用以下的命令。

electron --version

建立運行項目

Electron 官方提供了一個簡單的項目，能夠執行如下命令將項目克隆到本地。

git clone https://github.com/electron/e...

而後在項目中執行以下命令便可啓動項目。

cd electron-quick-start
npm install
npm start

啓動後項目的效果以下圖。

除此以外，咱們可使用 vue-cli 腳手架工具來建立項目。

vue init simulatedgreg/electron-vue

而後根據下面的提示一步步選中選項便可建立項目，以下所示。

而後，使用 npm install 命令安裝項目所須要的依賴包，安裝完成以後，可使用 npm run dev 或 npm run build 命令運行 electron-vue 模版應用程序，運行效果以下圖所示。

Electron 源碼目錄

Electron 的源代碼主要依據 Chromium 的拆分約定被拆成了許多部分。爲了更好地理解源代碼，您可能須要瞭解一下 Chromium 的多進程架構。

Electron 源碼目錄結構和含義具體以下：

Electron
├──atom - Electron 的源代碼
| ├── app - 系統入口代碼
| ├── browser - 包含了主窗口、UI 和其餘全部與主進程有關的東西，它會告訴渲染進程如何管理頁面
| | ├── lib - 主進程初始化代碼中 JavaScript 部分的代碼
| | ├── ui - 不一樣平臺上 UI 部分的實現
| | | ├── cocoa - Cocoa 部分的源代碼
| | | ├── gtk - GTK+ 部分的源代碼
| | | └── win - Windows GUI 部分的源代碼
| | ├── default_app - 在沒有指定 app 的狀況下 Electron 啓動時默認顯示的頁面
| | ├── api - 主進程 API 的實現
| | | └── lib - API 實現中 Javascript 部分的代碼
| | ├── net - 網絡相關的代碼
| | ├── mac - 與 Mac 有關的 Objective-C 代碼
| | └── resources - 圖標，平臺相關的文件等
| ├── renderer - 運行在渲染進程中的代碼
| | ├── lib - 渲染進程初始化代碼中 JavaScript 部分的代碼
| | └── api - 渲染進程 API 的實現
| | └── lib - API 實現中 Javascript 部分的代碼
| └── common - 同時被主進程和渲染進程用到的代碼，包括了一些用來將 node 的事件循環
| | 整合到 Chromium 的事件循環中時用到的工具函數和代碼
| ├── lib - 同時被主進程和渲染進程使用到的 Javascript 初始化代碼
| └── api - 同時被主進程和渲染進程使用到的 API 的實現以及 Electron 內置模塊的基礎設施
| └── lib - API 實現中 Javascript 部分的代碼
├── chromium_src - 從 Chromium 項目中拷貝來的代碼
├── docs - 英語版本的文檔
├── docs-translations - 各類語言版本的文檔翻譯
├── spec - 自動化測試
├── atom.gyp - Electron 的構建規則
└── common.gypi - 爲諸如 `node` 和 `breakpad` 等其餘組件準備的編譯設置和構建規則

平時開發時，須要重點關注的就是 src、package.json 和 appveyor.yml 目錄。除此以外，其餘須要注意的目錄以下：

• script - 用於諸如構建、打包、測試等開發用途的腳本
• tools - 在 gyp 文件中用到的工具腳本，但與 script 目錄不一樣， 該目錄中的腳本不該該被用戶直接調用
• vendor - 第三方依賴項的源代碼，爲了防止人們將它與 Chromium 源碼中的同名目錄相混淆， 在這裏咱們不使用 third_party 做爲目錄名
• node_modules - 在構建中用到的第三方 node 模塊
• out - ninja 的臨時輸出目錄
• dist - 由腳本 script/create-dist.py 建立的臨時發佈目錄
• external_binaries - 下載的不支持經過 gyp 構建的預編譯第三方框架

應用工程目錄

使用 electron-vue 模版建立的 Electron 工程結構以下圖。

和前端工程的項目結構相似，Electron 項目的目錄結構以下所示：

• electron-vue：Electron模版配置。
• build：文件夾，用來存放項目構建腳本。
• config：中存放項目的一些基本配置信息，最經常使用的就是端口轉發。
• node_modules：這個目錄存放的是項目的全部依賴，即 npm install 命令下載下來的文件。
• src：這個目錄下存放項目的源碼，即開發者寫的代碼放在這裏。
• static：用來存放靜態資源。
• index.html：則是項目的首頁、入口頁，也是整個項目惟一的HTML頁面。
• package.json：中定義了項目的全部依賴，包括開發時依賴和發佈時依賴。

對於開發者來講， 90% 的工做都是在 src 中完成，src 中的文件目錄以下。

Electron 應用程序分紅三個基礎模塊：主進程、進程間通訊和渲染進程。

一、主進程

Electron 運行 package.json 的 main 腳本（background.js）的進程被稱爲主進程。在主進程中運行的腳本經過建立web頁面來展現用戶界面。一個 Electron 應用老是有且只有一個主進程。

二、渲染進程

因爲 Electron 使用了 Chromium 來展現 Web 頁面，因此 Chromium 的多進程架構也被使用到。每一個 Electron 中的 Web 頁面運行在它本身的渲染進程中。在普通的瀏覽器中，Web 頁面一般在一個沙盒環境中運行，不被容許去接觸原生的資源。然而 Electron 容許用戶在 Node.js 的 API 支持下能夠在頁面中和操做系統進行一些底層交互。

三、主進程與渲染進程通訊

主進程使用 BrowserWindow 實例建立頁面。每一個 BrowserWindow 實例都在本身的渲染進程裏運行頁面。當一個 BrowserWindow 實例被銷燬後，相應的渲染進程也會被終止。主進程管理全部的 Web 頁面和它們對應的渲染進程。每一個渲染進程都是獨立的，它只關心它所運行的 Web 頁面。

src 目錄結構

在 Electron 目錄中，src 會包包含 main 和 renderer 兩個目錄。

main 目錄

main 目錄會包含 index.js 和 index.dev.js 兩個文件。

• index.js：應用程序的主文件，electron 也從這裏啓動的，它也被用做 webpack 產品構建的入口文件，全部的 main 進程工做都應該從這裏開始。

  index.dev.js：此文件專門用於開發階段，由於它會安裝 electron-debug 和 vue-devtools。通常不須要修改此文件，但它能夠擴展開發的需求。

渲染進程

renderer 是渲染進程目錄，平時項目開發源碼的存放目錄，包含 assets、components、router、store、App.vue 和 main.js。

assets：assets 下的文件如（js、css）都會在 dist 文件夾下面的項目目錄分別合併到一個文件裏面去。components：此文件用於存放應用開發的組件，能夠是自定義的組件。router：若是你瞭解 vue-router，那麼 Electron 項目的路由的使用方式和 vue-router 的使用方式相似。modules：electron-vue 利用 vuex 的模塊結構建立多個數據存儲，並保存在 src/renderer/store/modules 中。

相關案例

• https://github.com/xiaozhu188...

• https://github.com/SmallRural...

往期

Vue.js紀錄片

手摸手教你寫出使人窒息的爛代碼

[
](http://mp.weixin.qq.com/s?__b...