# 基于网易云音乐API实现PC端音乐网站 **Repository Path**: woate_admin/vue_pc_music ## Basic Information - **Project Name**: 基于网易云音乐API实现PC端音乐网站 - **Description**: 基于Vue2.x，采用VUE及网易云音乐 Node.js API service，感谢分享！ - **Primary Language**: JavaScript - **License**: GPL-3.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 103 - **Created**: 2024-10-31 - **Last Updated**: 2024-10-31 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 基于网易云音乐API实现PC端音乐网站 #### **=======》 [网易云音乐PC端音乐Vue 3.0 改版](https://gitee.com/trtst/vue3-music)《=======** #### 项目效果视频 [哔哩哔哩](https://www.bilibili.com/video/BV1rA411s7oE/) #### 介绍 采用VUE及网易云音乐 Node.js API service实现，网站风格参考了各平台，感谢[网易云音乐 NodeJS 版 API](https://binaryify.github.io/NeteaseCloudMusicApi/#/)！ :joy: 感觉写的很乱，功能虽已实现，但是代码还亟待优化，码农不易，欢迎 **starred** ,hhhh~ #### 安装教程 【 **_建议node版本14.x左右_** 】 1、clone下vue代码后，安装依赖 npm install ，运行服务npm run serve 2、clone下上面网易云音乐NodeJs代码后，安装依赖 npm install ，运行服务npm run start #### 使用说明 若使用中，接口请求无数据，请查看前端请求接口与服务端提供的路径端口号是否一致，为了避免冲突，我修改了端口号 #### 稍微拿的出手的功能 1、播放条区域，交互逻辑基本参考网易云音乐 2、mv视频，采用了videojs，添加了视频清晰度功能 #### 结束语 -实现了网易云音乐PC端一部分功能 -代码的优化及功能还有很大部分空间需要改进 -此版本也是公开的版本，若有新的进展，我会把代码更新到此版本 -关于项目的不足可以在下方评论，我会逐渐改进 -有打算准备用vue3重构一下 #### 问题交流群，仅供学习使用 不作任何商业用途 **欢迎加群一起讨论** ![加群：233725017](%E5%8A%A0%E7%BE%A4%EF%BC%9A233725017.jpg) #### 项目支持 **请我喝一杯咖啡,支持我更好的创作,感谢给予支持的朋友,您的支持是我前进的动力！** ![输入图片说明](%E5%B0%8F%E6%89%8B%E6%94%AF%E6%8C%81%E4%B8%80%E4%B8%8B.jpg) #### 项目效果图 ##### 首页 ![首页](https://images.gitee.com/uploads/images/2020/1224/163430_c2da37db_5120464.jpeg "QQ截图20201224152145.jpg") ##### 排行榜 | ![排行榜](https://images.gitee.com/uploads/images/2020/1225/092746_2e140041_5120464.jpeg "2.jpg") | ![排行榜](https://images.gitee.com/uploads/images/2020/1225/092814_52737571_5120464.jpeg "3.jpg") | |---|---| ##### 歌单 | ![歌单](https://images.gitee.com/uploads/images/2020/1225/093013_264824fb_5120464.jpeg "4.jpg") | ![歌单](https://images.gitee.com/uploads/images/2020/1225/093032_cefc8d73_5120464.jpeg "5.jpg") | |---|---| ##### MV ![MV](https://images.gitee.com/uploads/images/2020/1225/093135_e869c69a_5120464.jpeg "6.jpg") ##### 歌手 ![歌手](https://images.gitee.com/uploads/images/2020/1225/093144_60040566_5120464.jpeg "7.jpg") ##### 我的音乐 ![我的音乐](https://images.gitee.com/uploads/images/2020/1225/093207_bccde829_5120464.jpeg "8.jpg") ##### 登录弹窗 ![登录弹窗](https://images.gitee.com/uploads/images/2020/1225/093223_de8de155_5120464.jpeg "9.jpg") ##### 歌曲详情页 | ![歌曲详情页](https://images.gitee.com/uploads/images/2020/1225/093240_bce77a3f_5120464.jpeg "10.jpg") | ![歌曲详情页](https://images.gitee.com/uploads/images/2020/1225/093304_9a06a493_5120464.jpeg "11.jpg") | |---|---| ##### 播放条 歌词及 播放列表 | ![播放条](https://images.gitee.com/uploads/images/2020/1225/093327_99320e52_5120464.jpeg "12.jpg") | ![播放条](https://images.gitee.com/uploads/images/2020/1225/093347_752fdf20_5120464.jpeg "14.jpg") | |---|---| ##### MV详情页 | ![MV详情页](https://images.gitee.com/uploads/images/2020/1225/093409_025ddee1_5120464.jpeg "15.jpg") | ![MV详情页](https://images.gitee.com/uploads/images/2020/1225/093421_82c81e7e_5120464.jpeg "16.jpg") | |---|---| ##### 搜索结果页 ![搜索结果页](https://images.gitee.com/uploads/images/2020/1225/093440_b454d735_5120464.jpeg "17.jpg") ##### 歌手详情页 ![歌手详情页](https://images.gitee.com/uploads/images/2020/1225/093501_17a2a07d_5120464.jpeg "12.jpg")