vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

大家好,我是宝弟!

今天给大家推荐一个基于网易云api实现的一个在线音乐播放网站,分为在线部分与用户个人部分。该项目是纯前端项目,如果需要服务端,需要自行下载,服务端使用的是Node.js开发。服务端链接在文末!.

项目功能

主要实现了首页音乐推荐,音乐馆,音视频播放,歌词同步,二维码登录,歌手详情查看,综合搜索,歌单,深色模式与浅色模式等等

主要技术栈

该项目的主要技术栈是vue3.2+ts+pinia+vue-router+elementui-plus

快速使用

下载并安装服务端,然后 Node app.js 启动后端

克隆项目,运行 npm install 下载依赖,npm run dev 运行项目

项目截图
 

歌单页 

vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

视频推荐页

 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

视频播放页

 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

歌手页

 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

歌手详情页

在此页面可用查看歌手的专辑,视频,详情,热门歌曲 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

搜索页

可根据关键词搜索歌曲,歌单,歌手,视频,专辑 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

歌曲详情页

vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

暗黑模式

vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

我的喜欢音乐页

vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 

最近播放

在此页面可查看用户最近播放的音乐视频 vue3.2+ts+pinia+vue-router+elementui-plus一个在线音乐播放网站

 资源获取方式 

前端:

https://gitee.com/chart-twilight/music
 

服务端:

https://github.com/Binaryify/NeteaseCloudMusicApi