# Vue-NeteaseCloud-WebMusicApp **Repository Path**: unsafe-rust/Vue-NeteaseCloud-WebMusicApp ## Basic Information - **Project Name**: Vue-NeteaseCloud-WebMusicApp - **Description**: Vue高仿网易云音乐，基本实现网易云所有音乐、MV相关功能，现已更新到第二版，仅用于学习，下面有详细教程。 - **Primary Language**: JavaScript - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 342 - **Created**: 2021-01-30 - **Last Updated**: 2021-03-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ### Vue-NeteaseCloud-WebMusicApp-高仿网易云音乐 #### 推荐项目： 本人新写了个Vue组件库，目前已写20+组件，每个组件都有详细的API文档，[查看文档](https://fudaosheng.gitee.io/vbest-ui/)。觉得不错的可以去 ***[vbest-ui](https://gitee.com/fudaosheng/vbest-ui)*** 仓库查看。 #### 前言 肝代码不易，本项目还是比较能拿的出手的，若是在网上发表请标明出处，另外跪求Star。本项目仅用于学习。 [Github仓库](https://github.com/daoshengfu/Vue-NeteaseCloud-WebMusicApp) #### 项目简介 本项目后端接口是Github Binaryify的开源项目（[后端仓库地址](https://github.com/Binaryify/NeteaseCloudMusicApi)），接口文档直接在百度搜索“网易云音乐API”作者是Binaryify。 本项目前端均是本人独立自主开发，所用技术栈：Vue全家桶+better-scroll+axios。 [项目演示](https://www.bilibili.com/video/BV1ui4y137Xr/) 随手点个赞吧:tw-1f339: 下面也有项目效果图 **项目准备：** [后端API接口文档](https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi) **API安装步骤：** 1. git clone https://github.com/Binaryify/NeteaseCloudMusicApi.git (不会使用git的小伙伴可以直接去仓库下载接口哦，接口仓库地址：[https://github.com/Binaryify/NeteaseCloudMusicApi](http://)) 2. npm install 3.cd api文件夹 4.node app.js ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/093904_5acf461a_7602838.png "屏幕截图.png") 以上是运行成功的效果 #### 问题交流群 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0915/095720_2490a5ae_7602838.jpeg "qrcode_1600134831290.jpg") #### 关于本项目 本项目还有许多值得改进的地方，各位小伙伴们有好的解决方案及时在下面评论或者Pull Requests我， **让我们一起完善改进本项目** 关于项目的不足各位小伙伴可以在lssues里提出，或者在下面评论，看到我都会逐渐改进。 项目下一步方向：由于音乐播放器是我自己封装的，还存在许多改进地方，和一些功能没有开发，所以目前打算主要改进播放器方面。 #### 项目目录介绍 | ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/110643_de0f7a27_7602838.png "屏幕截图.png")| |--| #### 项目效果图 #### 首页 | ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102010_987b4b6e_7602838.png "屏幕截图.png") | ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102037_714c901c_7602838.png "屏幕截图.png") | |---|---| #### 搜索 |热搜列表![热搜列表](https://images.gitee.com/uploads/images/2020/0713/102255_0207e611_7602838.png "屏幕截图.png")| 搜索建议 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102336_e0b8bb31_7602838.png "屏幕截图.png")| |---|---| #### 搜索结果 | 双击歌曲可播放 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102433_e1d331c7_7602838.png "屏幕截图.png") |点击对应的歌手可进入该歌手的详细页面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102507_086200c5_7602838.png "屏幕截图.png") | |---|---| #### 歌单 | ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102751_6f17b546_7602838.png "屏幕截图.png")| ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/102813_85bb40fc_7602838.png "屏幕截图.png")| |---|---| #### 歌单详细 |歌单歌曲简介 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103021_8b208a86_7602838.png "屏幕截图.png") |歌单评论，登陆可评论 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103052_1521844b_7602838.png "屏幕截图.png") | |---|---| #### 登陆 | 登陆页面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103257_ec8fa433_7602838.png "屏幕截图.png") |登陆成功,显示私人歌单，信息 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103324_a44f6825_7602838.png "屏幕截图.png") | |---|---| #### 排行榜 |![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103456_df9a2e88_7602838.png "屏幕截图.png") | ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103533_0dbad57f_7602838.png "屏幕截图.png") | |---|---| #### 歌手 | 歌手首页 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103644_49366062_7602838.png "屏幕截图.png") |分类可选择喜欢的歌手 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103733_f863173a_7602838.png "屏幕截图.png") | |---|---| #### 歌手详情 | 歌手首页，简介![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103906_8419d742_7602838.png "屏幕截图.png") |歌手详情 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/103936_056a2644_7602838.png "屏幕截图.png") | |---|---| | 相似歌手，需要登陆![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/104058_8f6d2b32_7602838.png "屏幕截图.png") |歌手MV ![输入图片说明](https://images.gitee.com/uploads/images/2020/0721/165258_126b274d_7602838.png "屏幕截图.png") | |---|---| #### 最新歌曲 | 点击播放全部或双击单曲播放 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/104226_b125fecd_7602838.png "屏幕截图.png") |可上拉加载更多 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0713/104247_f3913cbb_7602838.png "屏幕截图.png") | |---|---| #### 播放器功能 | 播放器歌单 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0716/110240_8edcf752_7602838.png "屏幕截图.png") |播放器歌词功能 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0717/090113_4a050b0f_7602838.png "屏幕截图.png") | |---|---| | **纯净模式上线，听歌看评论** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0718/095732_be583e10_7602838.png "屏幕截图.png") | **纯净模式和播放器歌单更配哦** ![输入图片说明](https://images.gitee.com/uploads/images/2020/0718/100014_0c4fcb10_7602838.png "屏幕截图.png")| |---|---| #### MV | 推荐MV ![输入图片说明](https://images.gitee.com/uploads/images/2020/0721/153001_c36028ff_7602838.png "屏幕截图.png") | 所有MV ![输入图片说明](https://images.gitee.com/uploads/images/2020/0721/153047_d279ca8e_7602838.png "屏幕截图.png") | |---|---| |MV播放页面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0721/153156_d3032761_7602838.png "屏幕截图.png") |MV播放页面 ![输入图片说明](https://images.gitee.com/uploads/images/2020/0721/153331_687ce1f3_7602838.png "屏幕截图.png") | |---|---| #### 音乐不能播放问题 1.要播放的音乐需要vip 2.要播放的音乐url出错，可在控制台查看log日志