Electron + Vue開發(fā)一款音樂播放器
一、桌面版音樂播放器
馬要上過年放假了，給大家分享一個(gè)輕松的開源項(xiàng)目，一個(gè)基于 Electron + Vue 開發(fā)的音樂軟件。項(xiàng)目的一大特色就是多平臺(tái)搜索歌曲，并支持下載功能（據(jù)說有些平臺(tái)的VIP歌曲也可以哦?。?。
二、開發(fā)環(huán)境搭建
2.1 前提
本地安裝Node12.x+環(huán)境，Node.js是一個(gè)運(yùn)行在服務(wù)端的JavaScript框架，主要用于創(chuàng)建快速的、可擴(kuò)展的網(wǎng)絡(luò)應(yīng)用。 本地已安裝 VSCode開發(fā)工具（其他工具也可以）。掌握Vue基礎(chǔ)語(yǔ)法，因?yàn)閂ue是目前最流行的前端框架之一。
2.2 ?本地構(gòu)建
下載項(xiàng)目
項(xiàng)目地址: https://github.com/lyswhut/lx-music-desktop
直接下載項(xiàng)目源碼包，如下圖：
本地運(yùn)行
解壓下載的zip源碼包，使用VSCode開發(fā)工具打開，如下圖：
打開終端（控制臺(tái)），執(zhí)行下面命令就可以本地運(yùn)行：
#設(shè)置electron淘寶鏡像下載地址npm config set electron_mirror=https://npm.taobao.org/mirrors/electron/npm i #安裝依賴npm run dev #開發(fā)模式
本地運(yùn)行效果如下圖:
控制臺(tái)會(huì)輸出如下內(nèi)容:
本地打包
使用下面命令可進(jìn)行打包:
npm run pack:dir #構(gòu)建免安裝版npm run pack #構(gòu)建安裝包（Windows版）npm run pack:mac #構(gòu)建安裝包（Mac版）npm run pack:linux #構(gòu)建安裝包（Linux版）
三、源碼學(xué)習(xí)技巧
提前聲明，我是前端菜鳥，只是對(duì)前端比較感興趣。這里以一個(gè)小功能慢慢學(xué)習(xí)此項(xiàng)目。
本地開發(fā)環(huán)境運(yùn)行項(xiàng)目，會(huì)自動(dòng)運(yùn)行Google devtool,熟悉谷歌調(diào)試工具的小伙伴應(yīng)該知道它的強(qiáng)大。這里我介紹兩個(gè)功能，元素定位，日志查看。
元素定位
操作如下圖，這樣就可查看對(duì)應(yīng)Element的信息
結(jié)合定位到的元素的信息，在源碼中查找相關(guān)代碼。
日志查看
操作如下圖，開發(fā)環(huán)境下如果有日志輸出，我們可以通過日志反向?qū)W習(xí)代碼。
可以看到每一次搜索框輸入一個(gè)字母都會(huì)組裝一個(gè)請(qǐng)求，回車的時(shí)候才會(huì)發(fā)送搜索歌曲的請(qǐng)求連接，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
當(dāng)然通過全局搜索---start---我們就可以知道組裝請(qǐng)求鏈接的那部分代碼在哪里了。
四、安裝包下載
當(dāng)然，你也可以直接下載安裝包，本地安裝使用，
安裝包下載地址:https://github.com/lyswhut/lx-music-desktop/releases
根據(jù)自己的需要下載相應(yīng)的版本。
五、最后
假期正好是個(gè)充電的時(shí)間。這款桌面版音樂播放器是個(gè)不錯(cuò)的學(xué)習(xí)項(xiàng)目，你值得擁有！相信你能懂的！
