前言

雖然 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/electron-quick-start

然後在專案中執行如下命令即可啟動專案。

cd electron-quick-startnpm installnpm 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 應用程式分成三個基礎模組：主程序、程序間通訊和渲染程序。

1、主程序

Electron 執行 package.json 的 main 指令碼（background.js）的程序被稱為主程序。在主程序中執行的指令碼通過建立web頁面來展示使用者介面。一個 Electron 應用總是有且只有一個主程序。

2、渲染程序

由於 Electron 使用了 Chromium 來展示 Web 頁面，所以 Chromium 的多程序架構也被使用到。每個 Electron 中的 Web 頁面執行在它自己的渲染程序中。在普通的瀏覽器中，Web 頁面通常在一個沙盒環境中執行，不被允許去接觸原生的資源。然而 Electron 允許使用者在 Node.js 的 API 支援下可以在頁面中和作業系統進行一些底層互動。

3、主程序與渲染程序通訊

主程序使用 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 中。