mmPlayer
模仿 QQ 音乐网页版界面，采用 flexbox 和 position 布局； mmPlayer 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配； 只做主流浏览器兼容（对 IE 说拜拜，想想以前做项目还要兼容 IE7 ，都是泪啊！！！）
api：一个开源的网易云音乐 NodeJS 版 API（有 api 才有动力写！！！）
在线演示地址
React 移动端版本（高仿网易云音乐）
交流 QQ 群：529940193 本群不解答部署相关问题，如有部署问题请看关于项目线上部署
本播放器由 maomao1996 开发，您可以随意修改、使用、转载。但使用或转载时请务必保留出处！！！
免责声明
本站音频文件来自各网站接口，本站不会修改任何音频文件
音频版权来自各网站，本站只提供数据查询服务，不提供任何音频存储和贩卖服务
本项目仅为前端练手项目，请勿用作商业用途，请勿通过本项目下载盗版歌曲资源，否则后果自负！
安装与使用
检查 node 版本
node -v
Node.js 中文网
mmPlayer
git clone https://github.com/maomao1996/Vue-mmPlayer
cd Vue-mmPlayer
npm install
npm run serve
npm run build
后台 api 服务（本地开发）
网易云音乐 NodeJS 版 API
git clone --depth=1 https://github.com/Binaryify/NeteaseCloudMusicApi
cd NeteaseCloudMusicApi
npm install
node app.js
注意点
运行 mmPlayer 后无法获取音乐请检查后台 api 服务是否启动(即控制台请求报 404)
线上部署不是直接将整个项目丢到服务器，再去运行 npm run serve 命令
项目打包前 VUE_APP_BASE_API_URL 必须改后台 api 服务地址为线上地址，不能是本地地址
关于项目线上部署
最近有不少小伙伴部署出了问题，我在这说明下
后台 api 服务线上部署
你需要将 NeteaseCloudMusicApi 下载
然后将下载的文件上传至服务器
再通过 pm2 去启动服务(pm2 安装和相关命令网上有很多，这里不再赘述)
最后通过服务器 ip + 端口号访问验证 api 服务是否启动成功
mmPlayer 线上部署
首先要注意的是
先将 .env 文件的 VUE_APP_BASE_API_URL 修改成上一步启动的后台 api 服务地址(服务器 ip + 端口号或者你绑定的域名)
然后先在本地运行 npm run build 命令，会打包在生成一个 dist 文件
最后将打包的 dist 文件上传到你的网站服务器目录即可
其他：在宝塔面板部署 mmPlayer（不喜欢写文，可能有点烂不要介意哈）
最后：本人已和谷歌、百度达成合作了，如果还有啥不懂的，以后可以直接谷歌、百度
技术栈
Vue Cli（Vue 脚手架工具）
Vue（核心框架）
Vue Router（页面路由）
Vuex（状态管理）
ES 6 / 7 （JavaScript 语言的下一代标准）
Less（CSS 预处理器）
Axios（网络请求）
FastClick（解决移动端 300ms 点击延迟）
项目结构目录图（使用 tree 生成）
展开查看
功能
播放器
快捷键操作
歌词滚动
正在播放
排行榜
歌单详情
搜索
播放历史
查看评论
同步网易云歌单
界面欣赏
PC 端界面自我感觉还行， 就是移动端界面总觉得怪怪的，奈何审美有限，所以又去整了高仿网易云的 React 版本（如果小哥哥、小姐姐们有好看的界面，欢迎交流哈）
点击查看
更新说明
V1.8.2（2021.08.23）
移除我的歌单喜欢的音乐
优化请求错误处理
查看更多
其他说明
个人练手项目（本想先做移动端的，但是发现有很多人都做过，就稍微标新立异做个 PC 端）
如果您喜欢该作品，您可以点右上角 "Star" "Fork" 表示支持 谢谢！
后续：移动端版本、其他作品
如有问题请直接在 Issues 中提，或者您发现问题并有非常好的解决方案，欢迎 PR
鸣谢
特别感谢 JetBrains 为开源项目提供免费的 WebStorm 授权
License
MIT
推荐阅读：
