基于 Vue3 + Typescript + Vite2 打造網(wǎng)易云音樂(lè)播放器

Vue3 全家桶，Composition API

Vite2 問(wèn)就是閃電?

第三方網(wǎng)易云音樂(lè)播放器 ??

?? 在線體驗(yàn) PingMusic 登錄體驗(yàn)更多精彩

? Github傳送門(mén) 各位大佬點(diǎn)個(gè)star星星?

?? UI靈感來(lái)源QQ音樂(lè)、Apple Music

?? 項(xiàng)目技術(shù)棧

?? Vue v3.x

?? Vite v2.x

?? Vue Router v4.x

?? Vuex v4.x

?? Typescript

?? 功能

?? 支持登錄網(wǎng)易云賬號(hào)，收聽(tīng)私人歌單，收藏喜歡音樂(lè)

?? 精選推薦

? 獨(dú)家放送

?? 分類(lèi)歌單

?? 排行榜單

?? 歌手瀏覽

?? 新歌速遞

?? 視頻MV播放

?? 歌單詳情

?? 歌手詳情

?? 播放界面

?? 部分功能有待完善

?? 更多功能正在開(kāi)發(fā)中

源碼在這

(https://github.com/YongHengFu/ping-music-next) 各位大佬點(diǎn)個(gè)star星星?

?? 界面截圖

image

image

image

image

image

image

image

image

image

image

image

image

image

最后

雖然目前完成度還行，但是還有許多功能需要完善，不過(guò)學(xué)習(xí)Vue3和Vite的目標(biāo)已經(jīng)達(dá)成了，Vite用起來(lái)是真的爽，Vue3 的 Composition API剛開(kāi)始寫(xiě)的時(shí)候很不習(xí)慣，后來(lái)...真香?。?！

一開(kāi)始搭建框架的時(shí)候是采用了Ant Design，但是后來(lái)寫(xiě)著發(fā)現(xiàn)用了Ant Design還是大部分都是自定義樣式，所以就完全手寫(xiě)樣式了（Layout目前還用的是Ant Design，有空把它也去掉）

整個(gè)項(xiàng)目花時(shí)間最多的應(yīng)該是歌詞滾動(dòng)那一塊，現(xiàn)在回過(guò)頭，發(fā)現(xiàn)還是有挺大的優(yōu)化空間的，后續(xù)再把這塊給重構(gòu)一下。

源碼在這：

(https://github.com/YongHengFu/ping-music-next) 各位大佬點(diǎn)個(gè)star星星?