该项目主要实现了网易云页面基本功能，比如个性推荐，视频展示，歌手界面显示，搜索歌曲，播放音乐和下载音乐等等。后端接口文档由公开项目[NeteaseCloudMusicApi](https://neteasecloudmusicapi.vercel.app/#/) 提供，十分感谢!
项目在线体验地址：http://lucky.dewenking.top/ (已停用)
tip： 当时写的时候没有考虑pc尺寸问题，若是大屏，可能需要调节下页面比例缩放。
- Vue + Vuex + Vue-Router (核心框架)
- ElementUI (用于页面搭建)
- Axios (请求)
- babel-plugin-syntax-dynamic-import (用于路由分组按需懒加载)
- nprogress (用于加载过渡)
- Node.js (JavaScript运行环境)
- Express (Web框架)
- Nginx (反向代理服务器)
- pm2 (用于后台脚本常驻)
- nrm (快速切换npm镜像)
-
实现功能： 个性推荐，排行榜展示，视频\MV展示，收藏详情，每日推荐，搜索歌曲\歌手\专辑\歌单，歌手详情，专辑详情，歌单详情，用户详情，播放音乐和下载音乐等等。
-
组件复用： 音乐播放器的目的就是播放音乐，其中承载音乐的载体无非是由歌单、专辑、歌手这几块组成。基于网易云音乐APP分析，我们发现：
- 歌单页面、排行榜中的全球榜、首页中的歌手页面等等采用上下结构：上面为封面图，下面为图的描述；构建ListCard组件，减少同样结构的代码重复编写。
- 歌单详情页面、专辑详情页面等采用左右结构：左边为歌单或专辑封面，右边为在该专辑\歌单下的歌曲信息；创建了ListTable组件，后续相应页面直接进行调用。
- 视频、MV等页面与歌单页面等类似，都是上下结构，区别在于封面图还展示了播放量与时长；单独创建VideoListCard组件，采用解耦设计，满足不同功能不同组件展示，方便后续维护修改。
- 网易云音乐没有回到顶部功能，由于首页歌单、歌手等多个页面内容较多，往下加载较多内容时再回到顶部比较麻烦；创建了GoTop组件，加载内容较多的页面直接复用该组件，实现一键回到顶部功能。
-
数据加载： 数据量大的由后端设计分页接口，数据加载采用如下两种方式：一种是直接使用Pagination组件进行分页获取数据，可见首页歌单页面；另外一种是通过Infinite Scroll组件进行滚动加载，可见首页歌手页面。
-
搜索功能： 搜索主要由热搜榜与手动输入查找信息组成：点击热搜榜内容，会跳转到单曲子页面下，歌手\专辑\视频\歌单等导航栏供用户选择；手动输入进行搜索时，会进行搜索推荐，即单曲\歌手\专辑\歌单等内容展示，其中点击单曲将直接进行播放。通过防抖优化搜索，减轻服务器压力。
-
首屏优化：
- 路由懒加载： 通过syntax-dynamic-import插件对路由分组按需懒加载，减少请求次数。
- CDN引入： 通过UI面板查看打包文件体积大小，将ElementUI、Vue与Vuex等依赖项通过CDN方式引入，减轻打包体积。
- 图片压缩： 将静态资源registered (860KB)、topSongsLogo (268KB)这两张图压缩成仅10几KB大小，节省流量，提升加载速度。
- 开启gzip： 前端开启gzip，将大于10KB的js、css文件进行压缩；nginx也进行gzip配置，明显地提高了首屏加载速度。
总的来说，首屏加载速度由之前的十几秒左右变成4秒左右有很大的提升，不过4秒还是蛮久的，后续看看如何继续进行优化。
-
克隆项目于本地
git clone git@github.com:Dewenkings/Imitation-Netease-Cloud-Music.git -
安装依赖包
npm i -
项目运行
npm run serve
