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

技术栈

Vue + Vue-Router + Vuex + Webpack + Axios

如今就克隆下来看看吧！

Github地址： github.com/cat-walk/mu…

项目部署地址： meiyun.info

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

前端部分

1. 安装依赖

npm install
复制代码

2. 起项目

npm run serve
复制代码

后端部分

Github地址：github.com/Binaryify/N…

后端操做见文档。

界面和功能展现

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

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

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

实现了登陆功能

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

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

项目结构

PS：

1. 打勾的为已完成的内容，如今本项目除我的信息修改之外，其余功能都已完成。

2. 字体加粗的部分为一个组件，第二次使用同一组件（即组件复用）时再也不加粗，以作标识。

• 1. 侧边栏模块

  • 我的信息展现（头像、昵称）
    • 我的信息修改
  • 登陆按钮
    • 登陆模块

• 2. 音乐推荐模块（主页)

  • 轮播图banner模块
  • 排行榜入口
    • 排行榜模块
      • 歌单详情模块
        • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
  • 推荐歌单模块
    • 歌单详情模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能

• 3. 我的中心模块

  • 最近播放歌曲入口
    • 最近播放歌曲展现模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
  • 个人收藏入口
    • 歌单详情模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能

• 4. 搜索模块

  • 搜索框模块
    • 搜索结果模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
  • 热门搜索模块
    • 搜索结果模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
  • 搜索历史模块（与热门搜索模块公用一个组件）
    • 搜索结果模块
      • 播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能

代码规范

使用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

项目已知问题

收藏歌曲功能

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

   该问题多是后台对网易云的数据作了缓存致使的。（这个思考并无动脑子，咳咳( ´▽｀)

2. 因为还没有作节流和防抖，过于密集地点击收藏按钮时，可能会致使收藏/取消收藏功能不生效。

播放歌曲页面

1. 因为一系列复杂的问题，经过搜索界面进入歌曲控制页面的话，没有封面图片，只有懒加载的默认图片
2. 播放音乐时，旋转的封面图片有时会出现闪动
3. **若是你打开某一首歌没法播放，那可能这首歌是要付费才能播放的，换一首便可。**有时间会优化须要付费才能播放的提示。

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

1. 在"个人”页面下（还有部分其余页面），呼出侧边栏的按钮没法点击

2. 在一些不须要侧边栏功能的页面，还没有禁用呼出侧边栏功能

3. 侧边栏暂时只能经过左滑操做来关闭，还没有实现点击空白处关闭侧边栏

ios端

1. 因为iOS下规定audio标签不能自动播放，所以，iOS环境下，第一次播放音乐时，须要点击暂停后再点击播放按钮，如此便可。
2. 点击底部音乐控制面板后，有时会从新开始播放

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

致谢

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

很是感谢CaiJinyc，我从ta的项目里学到了很多

1. github.com/CaiJinyc/vu…
2. github.com/Binaryify/N…