基于 Vue3 + Typescript + Vite2 打造一款网易云音乐播放器 (🍕Vue3和Vite2 你学了吗)

823 阅读1分钟

基于 Vue3 + Typescript + Vite2 打造网易云音乐播放器

Vue3 全家桶,Composition API
Vite2 问就是闪电⚡

第三方网易云音乐播放器 📻

💻 在线体验 PingMusic 登录体验更多精彩

Github传送门 各位大佬点个star星星✨

🎧 UI灵感来源QQ音乐、Apple Music



⚙️ 项目技术栈

📯 Vue v3.x

🎺 Vite v2.x

🎸 Vue Router v4.x

🥁 Vuex v4.x

🎹 Typescript


🎨 功能

🎆 支持登录网易云账号,收听私人歌单,收藏喜欢音乐

🎇 精选推荐

✨ 独家放送

🎉 分类歌单

🎊 排行榜单

🎄 歌手浏览

🎋 新歌速递

🎍 视频MV播放

🎏 歌单详情

🎐 歌手详情

🎑 播放界面

🔧 部分功能有待完善

🔨 更多功能正在开发中


源码在这

(github.com/YongHengFu/…) 各位大佬点个star星星✨

🌈 界面截图

1.png

2.png

3.png

4.png

5.png

6.png

7.png

8.png

9.png

10.png

11.png

12.png

13.png

最后

虽然目前完成度还行,但是还有许多功能需要完善,不过学习Vue3和Vite的目标已经达成了,Vite用起来是真的爽,Vue3 的 Composition API刚开始写的时候很不习惯,后来...真香!!!
一开始搭建框架的时候是采用了Ant Design,但是后来写着发现用了Ant Design还是大部分都是自定义样式,所以就完全手写样式了(Layout目前还用的是Ant Design,有空把它也去掉)
整个项目花时间最多的应该是歌词滚动那一块,现在回过头,发现还是有挺大的优化空间的,后续再把这块给重构一下。

源码在这:

(github.com/YongHengFu/…) 各位大佬点个star星星✨