牛皮！竟然有大佬基于 Spring Boot + Vue 開發(fā)了一套網(wǎng)易云&QQ音樂（附源碼）。。。

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

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

electron --version

創(chuàng)建運行項目

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

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

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

cd electron-quick-startnpm installnpm start

啟動后項目的效果如下圖。

除此之外，我們可以使用 vue-cli 腳手架工具來創(chuàng)建項目。

vue init simulatedgreg/electron-vue

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

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

Electron 源碼目錄

Electron 的源代碼主要依據(jù) Chromium 的拆分約定被拆成了許多部分。為了更好地理解源代碼，您可能需要了解一下 Chromium 的多進程架構(gòu)。

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

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

• script - 用于諸如構(gòu)建、打包、測試等開發(fā)用途的腳本
• tools - 在 gyp 文件中用到的工具腳本，但與 script 目錄不同， 該目錄中的腳本不應(yīng)該被用戶直接調(diào)用
• vendor - 第三方依賴項的源代碼，為了防止人們將它與 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)如下圖。

和前端工程的項目結(jié)構(gòu)類似，Electron 項目的目錄結(jié)構(gòu)如下所示：

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

對于開發(fā)者來說， 90% 的工作都是在 src 中完成，src 中的文件目錄如下。

Electron 應(yīng)用程序分成三個基礎(chǔ)模塊：主進程、進程間通信和渲染進程。

1、主進程

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

2、渲染進程

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

3、主進程與渲染進程通信

主進程使用 BrowserWindow 實例創(chuàng)建頁面。每個 BrowserWindow 實例都在自己的渲染進程里運行頁面。當(dāng)一個 BrowserWindow 實例被銷毀后，相應(yīng)的渲染進程也會被終止。主進程管理所有的 Web 頁面和它們對應(yīng)的渲染進程。每個渲染進程都是獨立的，它只關(guā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 進程工作都應(yīng)該從這里開始。
• index.dev.js：此文件專門用于開發(fā)階段，因為它會安裝 electron-debug 和 vue-devtools。一般不需要修改此文件，但它可以擴展開發(fā)的需求。

渲染進程

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

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

# 綜合示例

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

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

electron-vue-cloud-music是一款使用Electron+Vue+Ant Design Vue技術(shù)開發(fā)跨平臺桌面應(yīng)用。

具有如下特點：

• 拖拽播放

• 桌面歌詞

• 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)，隨機播放，列表循環(huán)

• 路由導(dǎo)向，局部刷新，首頁欄目調(diào)整并持久化...

以下是部分運行效果：

2、qq音樂播放器

qq音樂播放器基于 electron-vue 開發(fā)的音樂播放器，界面模仿QQ音樂，使用的技術(shù)棧electron-vue+vue+vuex+vue-router+element- UI?？梢允褂萌缦碌姆绞絹磉\行項目。?

cd electron-vue-musicnpm install# 運行開發(fā)模式npm run dev# 打包安裝文件npm run build

部分運行效果如下圖

源碼獲取

掃碼下方二維碼，后臺回復(fù)【0】即可獲取