Vue3+Vite+TS独立开发仿网易云音乐Web应用

项目背景

自己之前的项目要么就是比较小的，要么就是跟着视频敲的，感觉做完之后并没有很好地吸收学到的知识。于是想要自己独立地做一个前端项目，刚好看到网易云音乐的网页端没有它的客户端好看，于是就仿照网易云音乐的客户端做了一个Web端的应用。

这个项目还有很多页面和功能没有实现，但一些基础功能都已经实现了。整个项目从技术选型，路由设计，再到代码规范，代码开发，自动构建部署的一系列流程都是自己独立完成的，期间不断踩坑，但也学习到不少的东西。

这个项目也是我第一次使用TypeScript进行开发，我只是简单地了解了一下TS的基础语法就开始写了，所以很多时候把TypeScript写成了"AnyScript"，后续再慢慢完善吧。

另外笔者是非科班出身，自学前端也不过半年，很多诸如设计模式等内容也还没学习，所以代码难免写成屎山，后续也会不断完善。

大家有什么疑问或建议的话可以在评论区留言呀！虚心接受大家的建议。

最后贴出Github的项目地址，欢迎大家pr和提issue，如果可以给个start鼓励一下我就更好啦！

• Github地址
• 在线体验网址
• 感谢NeteaseCloudMusicApi提供Api接口服务

项目技术栈

• Vue3
• Vue-Router
• Pinia
• Unocss
• Less
• TypeScript
• Vite
• VueUse
• Unplugin-auto-import
• pnpm

目前实现的功能

• 个性推荐页面✅
• 歌单详情页✅
• 歌手详情页✅
• 排行榜✅
• 播放器✅
• 歌曲详情页✅
• 歌词滚动✅
• 歌词与播放器联动✅
• 上一曲下一曲✅
• 离线播放✅
• 扫码登录✅
• 音量调整✅
• 自动构建和部署✅

待实现的功能

• 随机播放顺序播放
• 播放列表
• 手机号密码登录
• 邮箱登录
• 歌手详情页
• MV播放
• 音乐聊天室
• …

实际效果图展示