Vue3.x 网易云音乐_PC音乐播放器

3,297 阅读1分钟
vue3.x 网易云音乐

前言

开头还是感谢 网易云音乐 NodeJS 版 API提供的API练练手。

目前已完成音乐网站的大部分功能,部分细节有可能需要优化调整,如果你有更好的想法实现或者发现了错误、抑或代码优化建议等等,可以留言,我会回复。你的订阅,就是我的动力。

欢迎 watch / star / fork ,一键三连。 :clap:

项目线上预览

Vue3.x 网易云音乐_PC音乐播放器

项目代码地址

Vue2.x版本基于网易云音乐API实现PC端音乐网站

Vue3.x版本Vue3.x 网易云音乐_PC音乐播放器

介绍

该项目是基于 Vue 和 ElementUI 组件库 搭建的一个PC端的音乐网站,能登录网易云音乐用户账号,听歌、评论、收藏等功能。

项目安装

//首先你应当克隆该项目
git clone https://gitee.com/trtst/vue3-music.git
 
// 然后 安装项目依赖
npm install
 
// 接下来 部署服务端(二选一)
a) 克隆服务端项目并运行
b)部署服务端项目到Vercel
 
// 运行项目
npm run dev

技术栈

Vue3 / Vue-router / Element-UI / Axios / Vuex / Vite

视频展示

1、播放器

效果图预览展示

首页

首页.jpg

排行榜

排行榜.jpg

歌单列表页

歌单列表页.jpg

歌单详情页

歌单详情页.jpg

MV列表页

MV列表页.jpg

MV详情页

MV详情页.jpg

歌手列表页

歌手列表页.jpg

歌曲详情页

歌曲详情页.jpg

右下角播放器

右下角播放器.jpg

项目页面功能完成列表

✅ 首页

✅ 登录/退出登录

✅ 排行榜

✅ 歌单列表页

✅ 歌单详情页

✅ MV列表页

✅ MV详情页

✅ 歌手列表页

✅ 专辑详情页

✅ 歌曲播放

✅ 播放条(有些细节还需要修改优化)

⬜️ 评论留言点赞删除等

⬜️ 歌手详情页

⬜️ 搜索页面

⬜️ 歌曲收藏

⬜️ 个人主页

......