本项目是为了加深Vue框架学习的仿网易云音乐播放器项目,目前实现了基本音乐功能,还在进一步完善优化。后端使用开源网易云音乐NodeJS版Api。
仅供个人学习练手!
功能展示于文末
1.运行后端仓库
api:使用开源的nodejs封装的网易云音乐api 地址
# 下载后端仓库
$ git clone [email protected]:Binaryify/NeteaseCloudMusicApi.git
# 安装依赖
$ npm install
# 运行
$ node app.js
2.运行本项目
# 下载
$ git clone 本项目地址
# 安装依赖
$ npm install
# 开启本地服务运行项目
npm run dev
-
Vue、Vuex,VueCli,Vue-router
-
axios
-
ElementUi
-
ES6
-
Less
-
歌曲播放器:歌曲信息,换歌,进度条控制
-
最近播放(本地存储,不是云端的播放记录)
-
歌曲页面:歌词滚动,评论
-
发现页推荐、歌单、歌手、排行榜
-
歌曲列表:专辑入口,歌手入口,当前播放音乐行
-
歌单页:歌曲列表、歌单页搜索、加载完整歌单、收藏、评论
-
专辑页:歌曲列表、搜索、收藏、评论、专辑详情
-
歌手页:专辑列表、歌手描述、MV、相似歌手
-
M详情页:视频播放、相似视频推荐、 MV 播放、评论
-
用户页:基本信息、创建的歌单、收藏的歌单
-
搜索功能:热搜榜,搜索推荐,搜索页面,分类搜索结果
-
用户登录:手机密码登录,验证码登录账号,二维码登录
-
用户功能:点赞、回复、评论,收藏
-
我的收藏和我建立的歌单:用户收藏的专辑、MV、歌手及筛选功能
-
使用 Vuex 进行组件间通信,管理组件公用状态
-
优化
- el-skeleton实现骨架屏(skeleton),提高首屏加载时的用户体验
- 对部分显示异常页面移动端适配
- 移动端轮播图不使用立体效果
- 移动端的菜单显示
- 使用路由懒加载改善长时间白屏的问题
- 使用路由守卫监管未登录状态
- 视频和MV的推荐页面
- 私人FM页面
- 直播页面
- 播放模式切换功能(单曲循环、列表循环等)
- 音乐下载功能
- 分享功能
- 用户更改信息功能
- 给用户私信功能
- 评论页面的更多精彩评论
- 更多的优化功能
发现音乐-个性推荐 | 发现音乐-歌单 |
![]() |
![]() |
发现音乐-排行榜 | 发现音乐-歌手 |
![]() |
![]() |
歌单详情页 | 歌手详情页 |
![]() |
![]() |
专辑详情页 | 专辑评论页 |
![]() |
![]() |
最近播放 | 登录页面 |
![]() |
![]() |
歌曲播放页面 | 登录后-每日推荐 |
![]() |
![]() |
登录后-收藏页面 | 登录后-个人歌单 |
![]() |
![]() |
https://github.com/Binaryify/NeteaseCloudMusicApi