一、桌面版音樂播放器
勞動節放假了，給大家分享一個輕鬆的開源項目，一個基於 Electron + Vue 開發的音樂軟件。項目的一大特色就是多平臺搜索歌曲，並支持下載功能（有些平臺的vip歌曲也可以哦！）。
二、開發環境搭建
2.1 前提
- 本地安裝Node12.x+環境，Node.js是一個運行在服務端的JavaScript框架，主要用於創建快速的、可擴展的網絡應用。
- 本地已安裝
VSCode開發工具（其他工具也可以）。 - 掌握Vue基礎語法，因爲Vue是目前最流行的前端框架之一。
2.2 本地構建
下載項目
項目地址: https://github.com/lyswhut/lx-music-desktop
直接下載項目源碼包，如下圖：
本地運行
解壓下載的zip源碼包，使用VSCode開發工具打開，如下圖：
打開終端（控制檯），執行下面命令就可以本地運行：
#設置electron淘寶鏡像下載地址
npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/
npm i #安裝依賴
npm run dev #開發模式
本地運行效果如下圖:
控制檯會輸出如下內容:
本地打包
使用下面命令可進行打包:
npm run pack:dir #構建免安裝版
npm run pack #構建安裝包（Windows版）
npm run pack:mac #構建安裝包（Mac版）
npm run pack:linux #構建安裝包（Linux版）
三、源碼學習技巧
提前聲明，我是前端菜鳥，只是對前端比較感興趣。這裏以一個小功能慢慢學習此項目。
本地開發環境運行項目，會自動運行Google devtool,熟悉谷歌調試工具的小夥伴應該知道它的強大。這裏我介紹兩個功能，元素定位，日誌查看。
元素定位
操作如下圖，這樣就可查看對應Element的信息
結合定位到的元素的信息，在源碼中查找相關代碼。
日誌查看
操作如下圖，開發環境下如果有日誌輸出，我們可以通過日誌反向學習代碼。
可以看到每一次搜索框輸入一個字母都會組裝一個請求，回車的時候纔會發送搜索歌曲的請求連接，
http://search.kuwo.cn/r.s?client=kt&all=taylor%20swift&pn=0&rn=30&uid=794762570&ver=kwplayer_ar_9.2.2.1&vipver=1&show_copyright_off=1&newver=1&ft=music&cluster=0&strategy=2012&encoding=utf8&rformat=json&vermerge=1&mobi=1&issubtitle=1
當然通過全局搜索---start---我們就可以知道組裝請求鏈接的那部分代碼在哪裏了。
四、安裝包下載
當然，你也可以直接下載安裝包，本地安裝使用，
安裝包下載地址:https://github.com/lyswhut/lx-music-desktop/releases
根據自己的需要下載相應的版本。
五、最後
應的版本。
[外鏈圖片轉存中…(img-iNGfGJ2U-1588681108804)]
五、最後
五一假期正好是個充電的時間。這款PC版音樂播放器是個不錯的學習項目，你值得擁有！
