vue-electron製做網易雲音樂客戶端

前言

就在兩個月前公司需求快速開發一款桌面應用軟件，嗯，快速。

而且提供了技術方案Nwjs，起初不知道這款框架的存在，網上查找了一波，發現更牛逼的一款快速搭建桌面應用的框架，那麼它就是electron。

很好，前端er任務又來了，開發過程當中踩了很多坑，一個缺點就是體積大。其餘方面簡直就是帥呆了，酷斃了，簡直沒法比喻了。自動更新、本地菜單和通知、系統奔潰報告、調試和分析、Windows安裝程序，簡直爲咱們節省了很多時間，大讚一個。

這裏咱們不對electron作過多的介紹，你們自行看官方文檔。

切入正題，經過對electron的一些瞭解，業餘時間經過vue、electron搭建了一個網易雲音樂客戶端，由於時間關係只作了客戶端的核心部分，有時間更新，這個項目會堅持作下去。

技術棧

• vue全家桶(vue vue-router vuex)
• electron(應用框架)
• request(請求數據)
• ES6
• SCSS
• 更多...

啓動運行

npm instal --- 安裝依賴
cd api/ npm install && npm start --- 啓動api服務
npm run dev --- 運行項目
npm run build --- 打包本地項目

關於打包你們自行在官方查找相關配置，這裏就不一一介紹了。

功能

• 用戶手機號登陸
• 用戶菜單
• 條件搜索
• 播放記錄列表
• 播放詳情
• 音量大小
• 更多...

功能看起來很少，精品在於細節，主進程與渲染進程的一些方法封裝、組件封裝、vuex的狀態管理應用。

先看一下運行效果視頻

...

再來幾張張圖片

是否是很贊，由於我電腦是是MacOs系統，客戶端界面只作了Mac系統界面Windows運行起來所看到的是一款MacOs的應用，看起來感受怪怪的。不過話說回來，如今前端乾的事兒真很多，Web、混合App開發、遊戲、桌面應用。

嗯，加油前端！！！

源碼

源碼地址：https://github.com/eugeneCN/v...

喜歡的小夥伴點個star吧。