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

不念不忘少年蓝@ 2022-01-20 04:43 292阅读 0赞

## 技术栈 ##

Vue + Vue-Router + Vuex + Webpack + Axios

## 现在就克隆下来看看吧！ ##

Github地址： [github.com/cat-walk/mu…][github.com_cat-walk_mu]

项目部署地址： [meiyun.info][]

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

### 前端部分 ###

1.  安装依赖

npm install
    复制代码

1.  起项目

npm run serve
    复制代码

### 后端部分 ###

Github地址：[github.com/Binaryify/N…][github.com_Binaryify_N]

后端操作见文档。

## 界面和功能展示 ##

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

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

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

### 实现了登录功能 ###

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

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

## 项目结构 ##

PS：

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

*  **1. 侧边栏模块**
    
     *  个人信息展示（头像、昵称）
        
         *  个人信息修改
     *  登录按钮
        
         *  **登录模块**
 *  **2. 音乐推荐模块**（主页)
    
     *  **轮播图banner模块**
     *  排行榜入口
        
         *  **排行榜模块**
            
             *  **歌单详情模块**
                
                 *  **播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能**
     *  **推荐歌单模块**
        
         *  歌单详情模块
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
 *  **3. 个人中心模块**
    
     *  最近播放歌曲入口
        
         *  **最近播放歌曲展示模块**
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
     *  我的收藏入口
        
         *  歌单详情模块
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
 *  **4. 搜索模块**
    
     *  **搜索框模块**
        
         *  **搜索结果模块**
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
     *  **热门搜索模块**
        
         *  搜索结果模块
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能
     *  搜索历史模块（与热门搜索模块公用一个组件）
        
         *  搜索结果模块
            
             *  播放控制模块：实现了收藏/取消收藏歌曲的功能，实现了添加到最近播放歌曲的功能

## 代码规范 ##

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

[在VSCode里配置 ESLint + Airbnb + Vue][VSCode_ ESLint _ Airbnb _ Vue]

## 技术方案 ##

*  项目目录结构
    
    参考 [优雅的 Vue 项目目录结构设计][Vue]
 *  移动适配方案
    
    基于[amfe-flexible][]，进行了符合自己使用习惯的修改
    
    示例：
    
     *  根目录字体大小：100px，即1rem = 100px。
     *  设计稿上75px = 75/100 = 0.75rem。
 *  统一不同浏览器的默认样式: Normalize.css现已改用[minireset.css][]
    
    Normalize.css：参考 [normalize.css与reset.css的不同][normalize.css_reset.css] [normalize.css的使用][normalize.css]
 *  侧边栏实现：[vue-slideout][]
 *  轮播图实现：[在Vue中使用Swiper][Vue_Swiper]

## 项目已知问题 ##

**收藏歌曲功能**

1.  点击收藏歌曲按钮后，有时会有一定的延迟（0.5s～5s，视网络情况）收藏才会成功。
    
    该问题可能是后台对网易云的数据做了缓存导致的。（这个思考并没有动脑子，咳咳( ´▽｀)
2.  由于尚未做节流和防抖，过于密集地点击收藏按钮时，可能会导致收藏/取消收藏功能不生效。

**播放歌曲页面**

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

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

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

**ios端**

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

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

## 致谢 ##

**非常感谢后台提供者[Binaryify][github.com_Binaryify_N]，接口很稳定，文档很完善**

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

1.  [github.com/CaiJinyc/vu…][CaiJinyc]
2.  [github.com/Binaryify/N…][github.com_Binaryify_N]

[github.com_cat-walk_mu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fcat-walk%2Fmusic-player-in-vue
[meiyun.info]: https://link.juejin.im?target=http%3A%2F%2Fmeiyun.info
[github.com_Binaryify_N]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FBinaryify%2FNeteaseCloudMusicApi
[VSCode_ ESLint _ Airbnb _ Vue]: https://link.juejin.im?target=https%3A%2F%2Fcatwalk.red%2F2019%2F03%2F04%2F%25E5%259C%25A8VSCode%25E9%2587%258C%25E9%2585%258D%25E7%25BD%25AE%2520ESLint%2520%2B%2520Airbnb%2520%2B%2520Vue%2F
[Vue]: https://juejin.im/entry/5abd80fa518825558a06b7ce
[amfe-flexible]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Famfe%2Flib-flexible
[minireset.css]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fjgthms%2Fminireset.css
[normalize.css_reset.css]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2Fad64c21e899a
[normalize.css]: https://link.juejin.im?target=https%3A%2F%2Fcnodejs.org%2Ftopic%2F57f3846e83a4d9176a71da82
[vue-slideout]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fvouill%2Fvue-slideout
[Vue_Swiper]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsurmon-china%2Fvue-awesome-swiper
[CaiJinyc]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FCaiJinyc%2Fvue-music-webapp