Spring Boot + Vue 如此強(qiáng)大，這真是一個讓人驚艷的項(xiàng)目

• 環(huán)境搭建
• Electron源碼目錄
• 應(yīng)用工程目錄
• 綜合示例
• 1，網(wǎng)易云音樂
• 2，qq音樂播放器

雖然B/S是目前開發(fā)的主流，但是C/S仍然有很大的市場需求。受限于瀏覽器的沙盒限制，網(wǎng)頁應(yīng)用無法滿足某些場景下的使用需求，而桌面應(yīng)用可以讀寫本地文件、調(diào)用更多系統(tǒng)資源，再加上Web開發(fā)的低成本、高效率的優(yōu)勢，這種跨平臺方式越來越受到開發(fā)者的喜愛。

Electron是一個基于Chromium和 Node.js，使用 HTML、CSS和JavaScript來構(gòu)建跨平臺應(yīng)用的跨平臺開發(fā)框架，兼容 Mac、Windows 和 Linux。目前，Electron已經(jīng)創(chuàng)建了包括VScode和Atom在內(nèi)的大量應(yīng)用。

環(huán)境搭建

創(chuàng)建Electron跨平臺應(yīng)用之前，需要先安裝一些常用的工具，如Node、vue和Electron等。

安裝Node

進(jìn)入Node官網(wǎng)下載頁http://nodejs.cn/download/，然后下載對應(yīng)的版本即可，下載時建議下載穩(wěn)定版本。如果安裝Node使用Homebrew方式，建議安裝時將npm倉庫鏡像改為淘寶鏡像，如下所示。

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

安裝/升級vue-cli

先執(zhí)行以下命令，確認(rèn)下本地安裝的vue-cli版本。

vue?-V

如果沒有安裝或者不是最新版，可以執(zhí)行以下命令安裝/升級。

npm?install?@vue/cli?-g

安裝Electron

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

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

為了驗(yàn)證是否安裝成功，可以使用如下的命令。

electron?--version

創(chuàng)建運(yùn)行項(xiàng)目

Electron官方提高了一個簡單的項(xiàng)目，可以執(zhí)行以下命令將項(xiàng)目克隆到本地。

git?clone?https://github.com/electron/electron-quick-start

然后在項(xiàng)目中執(zhí)行如下命令即可啟動項(xiàng)目。

cd?electron-quick-start
npm?install
npm?start

啟動后項(xiàng)目的效果如下圖。除此之外，我們可以使用vue-cli腳手架工具來創(chuàng)建項(xiàng)目。

vue?init?simulatedgreg/electron-vue

然后根據(jù)下面的提示一步步選中選項(xiàng)即可創(chuàng)建項(xiàng)目，如下所示。

然后，使用npm install命令安裝項(xiàng)目所需要的依賴包，安裝完成之后，可以使用npm run dev或npm run build命令運(yùn)行electron-vue模版應(yīng)用程序，運(yùn)行效果如下圖所示。

Electron源碼目錄

Electron 的源代碼主要依據(jù) Chromium 的拆分約定被拆成了許多部分。為了更好地理解源代碼，您可能需要了解一下 Chromium 的多進(jìn)程架構(gòu)。Electron源碼目錄結(jié)構(gòu)和含義具體如下：

Electron
├──atom?-?Electron?的源代碼
|??├──?app?-?系統(tǒng)入口代碼
|??├──?browser?-?包含了主窗口、UI?和其他所有與主進(jìn)程有關(guān)的東西，它會告訴渲染進(jìn)程如何管理頁面
|??|???├──?lib?-?主進(jìn)程初始化代碼中?JavaScript?部分的代碼
|??|???├──?ui?-?不同平臺上?UI?部分的實(shí)現(xiàn)
|??|???|???├──?cocoa?-?Cocoa?部分的源代碼
|??|???|???├──?gtk?-?GTK+?部分的源代碼
|??|???|???└──?win?-?Windows?GUI?部分的源代碼
|??|???├──?default_app?-?在沒有指定?app?的情況下?Electron?啟動時默認(rèn)顯示的頁面
|??|???├──?api?-?主進(jìn)程?API?的實(shí)現(xiàn)
|??|???|???└──?lib?-?API?實(shí)現(xiàn)中?Javascript?部分的代碼
|??|???├──?net?-?網(wǎng)絡(luò)相關(guān)的代碼
|??|???├──?mac?-?與?Mac?有關(guān)的?Objective-C?代碼
|??|???└──?resources?-?圖標(biāo)，平臺相關(guān)的文件等
|??├──?renderer?-?運(yùn)行在渲染進(jìn)程中的代碼
|??|???├──?lib?-?渲染進(jìn)程初始化代碼中?JavaScript?部分的代碼
|??|???└──?api?-?渲染進(jìn)程?API?的實(shí)現(xiàn)
|??|???????└──?lib?-?API?實(shí)現(xiàn)中?Javascript?部分的代碼
|??└──?common?-?同時被主進(jìn)程和渲染進(jìn)程用到的代碼，包括了一些用來將?node?的事件循環(huán)
|??????|????????整合到?Chromium?的事件循環(huán)中時用到的工具函數(shù)和代碼
|??????├──?lib?-?同時被主進(jìn)程和渲染進(jìn)程使用到的?Javascript?初始化代碼
|??????└──?api?-?同時被主進(jìn)程和渲染進(jìn)程使用到的?API?的實(shí)現(xiàn)以及?Electron?內(nèi)置模塊的基礎(chǔ)設(shè)施
|??????????└──?lib?-?API?實(shí)現(xiàn)中?Javascript?部分的代碼
├──?chromium_src?-?從?Chromium?項(xiàng)目中拷貝來的代碼
├──?docs?-?英語版本的文檔
├──?docs-translations?-?各種語言版本的文檔翻譯
├──?spec?-?自動化測試
├──?atom.gyp?-?Electron?的構(gòu)建規(guī)則
└──?common.gypi?-?為諸如?`node`?和?`breakpad`?等其他組件準(zhǔn)備的編譯設(shè)置和構(gòu)建規(guī)則

平時開發(fā)時，需要重點(diǎn)關(guān)注的就是src、package.json和appveyor.yml目錄。除此之外，其他需要注意的目錄如下：

• script - 用于諸如構(gòu)建、打包、測試等開發(fā)用途的腳本
• tools - 在 gyp 文件中用到的工具腳本，但與 script 目錄不同， 該目錄中的腳本不應(yīng)該被用戶直接調(diào)用
• vendor - 第三方依賴項(xiàng)的源代碼，為了防止人們將它與 Chromium 源碼中的同名目錄相混淆， 在這里我們不使用 third_party 作為目錄名
• node_modules - 在構(gòu)建中用到的第三方 node 模塊
• out - ninja 的臨時輸出目錄
• dist - 由腳本 script/create-dist.py 創(chuàng)建的臨時發(fā)布目錄
• external_binaries - 下載的不支持通過 gyp 構(gòu)建的預(yù)編譯第三方框架

應(yīng)用工程目錄

使用electron-vue模版創(chuàng)建的Electron工程結(jié)構(gòu)如下圖。和前端工程的項(xiàng)目結(jié)構(gòu)類似，Electron項(xiàng)目的目錄結(jié)構(gòu)如下所示：

• electron-vue：Electron模版配置。
• build：文件夾，用來存放項(xiàng)目構(gòu)建腳本。
• config：中存放項(xiàng)目的一些基本配置信息，最常用的就是端口轉(zhuǎn)發(fā)。
• node_modules：這個目錄存放的是項(xiàng)目的所有依賴，即 npm install 命令下載下來的文件。
• src：這個目錄下存放項(xiàng)目的源碼，即開發(fā)者寫的代碼放在這里。
• static：用來存放靜態(tài)資源。
• index.html：則是項(xiàng)目的首頁、入口頁，也是整個項(xiàng)目唯一的HTML頁面。
• package.json：中定義了項(xiàng)目的所有依賴，包括開發(fā)時依賴和發(fā)布時依賴。

對于開發(fā)者來說， 90% 的工作都是在 src 中完成，src 中的文件目錄如下。Electron應(yīng)用程序分成三個基礎(chǔ)模塊：主進(jìn)程、進(jìn)程間通信和渲染進(jìn)程。

【主進(jìn)程】

Electron 運(yùn)行 package.json 的 main 腳本（background.js）的進(jìn)程被稱為主進(jìn)程。在主進(jìn)程中運(yùn)行的腳本通過創(chuàng)建web頁面來展示用戶界面。一個 Electron 應(yīng)用總是有且只有一個主進(jìn)程。

【渲染進(jìn)程】

由于 Electron 使用了 Chromium 來展示 Web 頁面，所以 Chromium 的多進(jìn)程架構(gòu)也被使用到。每個 Electron 中的 Web 頁面運(yùn)行在它自己的渲染進(jìn)程中。在普通的瀏覽器中，Web頁面通常在一個沙盒環(huán)境中運(yùn)行，不被允許去接觸原生的資源。然而 Electron 允許用戶在 Node.js 的 API 支持下可以在頁面中和操作系統(tǒng)進(jìn)行一些底層交互。

【主進(jìn)程與渲染進(jìn)程通信】

主進(jìn)程使用 BrowserWindow 實(shí)例創(chuàng)建頁面。每個 BrowserWindow 實(shí)例都在自己的渲染進(jìn)程里運(yùn)行頁面。當(dāng)一個 BrowserWindow 實(shí)例被銷毀后，相應(yīng)的渲染進(jìn)程也會被終止。主進(jìn)程管理所有的Web頁面和它們對應(yīng)的渲染進(jìn)程。每個渲染進(jìn)程都是獨(dú)立的，它只關(guān)心它所運(yùn)行的 Web 頁面。

src目錄結(jié)構(gòu)

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

main目錄

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

• index.js：應(yīng)用程序的主文件，electron 也從這里啟動的，它也被用作 webpack 產(chǎn)品構(gòu)建的入口文件，所有的 main 進(jìn)程工作都應(yīng)該從這里開始。
• index.dev.js：此文件專門用于開發(fā)階段，因?yàn)樗鼤惭b electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以擴(kuò)展開發(fā)的需求。

渲染進(jìn)程

renderer是渲染進(jìn)程目錄，平時項(xiàng)目開發(fā)源碼的存放目錄，包含assets、components、router、store、App.vue和main.js。

• assets：assets下的文件如（js、css）都會在dist文件夾下面的項(xiàng)目目錄分別合并到一個文件里面去。
• components：此文件用于存放應(yīng)用開發(fā)的組件，可以是自定義的組件。
• router：如果你了解vue-router，那么Electron項(xiàng)目的路由的使用方式和vue-router的使用方式類似。
• modules：electron-vue 利用 vuex 的模塊結(jié)構(gòu)創(chuàng)建多個數(shù)據(jù)存儲，并保存在 src/renderer/store/modules 中。

綜合示例

1，網(wǎng)易云音樂

electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技術(shù)開發(fā)跨平臺桌面應(yīng)用。下載鏈接：https://github.com/xiaozhu188/electron-vue-cloud-music。具有如下特點(diǎn)：

• 拖拽播放
• 桌面歌詞
• mini模式
• 自定義托盤右鍵菜單
• 任務(wù)欄縮略圖，歌曲操作
• 音頻可視化
• 自動/手動檢查更新
• Nedb數(shù)據(jù)庫持久化
• 自定義安裝路徑，安裝界面美化
• 瀏覽器中啟動客戶端
• Travis CL，AppVeyor自動構(gòu)建
• 換膚，下載，本地歌曲匹配，網(wǎng)絡(luò)變化桌面通知，分享歌曲/歌單/MV/視頻等到QQ空間
• 登錄，私人Fm，歌單，專輯，歌手，排行榜，MV，視頻，評論，搜索，用戶，動態(tài)，粉絲，關(guān)注，云盤，收藏...
• 心動模式，歌詞微調(diào)，下一首播放，追加播放，單曲循環(huán)，隨機(jī)播放，列表循環(huán)
• 路由導(dǎo)向，局部刷新，首頁欄目調(diào)整并持久化...

以下是部分運(yùn)行效果：

2，qq音樂播放器

qq音樂播放器基于 electron-vue 開發(fā)的音樂播放器，界面模仿QQ音樂，使用的技術(shù)棧electron-vue+vue+vuex+vue-router+element- UI。可以使用如下的方式來運(yùn)行項(xiàng)目。

git?clone?https://github.com/SmallRuralDog/electron-vue-music.git

cd?electron-vue-music

npm?install

#?運(yùn)行開發(fā)模式
npm?run?dev

#?打包安裝文件
npm?run?build

部分運(yùn)行效果如下圖。