高仿移动端网易云音乐 Vue前端项目

技术栈

Vue + Vue-Router + Vuex + Webpack + Axios

现在就克隆下来看看吧！

Github地址： https://github.com/cat-walk/music-player-in-vue

项目部署地址： http://meiyun.info

如果你发现该项目有问题，建议先看看本文底部的项目已知问题，里面可能会有说明，如果没有，欢迎issue或留言，谢谢～

前端部分

安装依赖

npm install

起项目

npm run serve

后端部分

Github地址：https://github.com/Binaryify/NeteaseCloudMusicApi

后端操作见文档。

界面和功能展示

首页展示banner、推荐歌单，点击可进入排行榜

歌曲播放界面支持播放进度同步、收藏或取消收藏当前歌曲

banner、排行榜左边的三个按钮点击没有效果( ´▽｀) ，没时间写那些啦...

实现了登录功能

登录后展示头像和昵称，且可进入个人中心即“我的”页面，可查看收藏的音乐和最近播放过的音乐。

搜索模块：热门搜索、搜索历史、搜索建议

项目结构

PS：

打勾的为已完成的内容，现在本项目除个人信息修改以外，其他功能都已完成。
字体加粗的部分为一个组件，第二次使用同一组件（即组件复用）时不再加粗，以做标识。

代码规范

使用EsLint, lint规范采用airbnb 的js 代码规范

在VSCode里配置 ESLint + Airbnb + Vue

技术方案

项目目录结构

参考优雅的 Vue 项目目录结构设计
移动适配方案

基于amfe-flexible，进行了符合自己使用习惯的修改

示例：
- 根目录字体大小：100px，即1rem = 100px。
- 设计稿上75px = 75/100 = 0.75rem。
~~统一不同浏览器的默认样式: Normalize.css~~现已改用minireset.css

Normalize.css：参考 normalize.css与reset.css的不同 normalize.css的使用
侧边栏实现：vue-slideout
轮播图实现：在Vue中使用Swiper

项目已知问题

收藏歌曲功能

点击收藏歌曲按钮后，有时会有一定的延迟（0.5s～5s，视网络情况）收藏才会成功。

该问题可能是后台对网易云的数据做了缓存导致的。（这个思考并没有动脑子，咳咳( ´▽｀)
由于尚未做节流和防抖，过于密集地点击收藏按钮时，可能会导致收藏/取消收藏功能不生效。

播放歌曲页面

由于一系列复杂的问题，通过搜索界面进入歌曲控制页面的话，没有封面图片，只有懒加载的默认图片
播放音乐时，旋转的封面图片有时会出现闪动
**如果你打开某一首歌无法播放，那可能这首歌是要付费才能播放的，换一首即可。**有时间会优化需要付费才能播放的提示。

侧边栏（Vue-Slideout插件实现，=====>甩锅:) ）

在"我的”页面下（还有部分其他页面），呼出侧边栏的按钮无法点击
在一些不需要侧边栏功能的页面，尚未禁用呼出侧边栏功能
侧边栏暂时只能通过左滑操作来关闭，尚未实现点击空白处关闭侧边栏

ios端

由于iOS下规定audio标签不能自动播放，因此，iOS环境下，第一次播放音乐时，需要点击暂停后再点击播放按钮，如此即可。
点击底部音乐控制面板后，有时会重新开始播放

写这个项目的经验和收获将在整理后发到我的Github上，应该不会鸽

致谢

非常感谢后台提供者Binaryify，接口很稳定，文档很完善

非常感谢CaiJinyc，我从ta的项目里学到了不少

Name	Latest commit message	Commit time
Failed to load latest commit information.
public
src	修改了底部音乐控制面板的样式	Apr 4, 2019
.browserslistrc	init	Feb 25, 2019
.editorconfig
.eslintrc.js	集成了Eslint，并采用Airbnb的代码规范	Mar 4, 2019
.gitignore
README.md
babel.config.js	init	Feb 25, 2019
package-lock.json	编写头部导航栏	Feb 26, 2019
package.json
postcss.config.js	init	Feb 25, 2019
vue.config.js	修复：更真生产环境的路径	Apr 3, 2019

cat-walk/music-player-in-vue

Join GitHub today

Clone with HTTPS

Downloading...

Launching GitHub Desktop...