前言：
本人大二在校生，学习前端半年，在学习vue后便利用了这四十多天的时间边学习边使用vue全家桶开发这个仿网易云音乐进行实操。因所学有限，项目所包含的内容可能会比较简单，并没有涉及到服务器搭建以及webpack配置等(还是要多加学习啊，加油！)。
介绍:
预览
使用的是学生服务器,带宽较小，初次体验可能会加载得比较慢
项目地址
在线体验(PC端推荐使用chrome或firefox预览)
移动端推荐使用Android手机微信扫码预览,暂不支持iOS播放
安装运行
克隆项目
git clone https://github.com/DangoSky/cloud-music.git
安装依赖
npm install
开发环境运行
npm run serve
生产环境构建
npm run build
技术栈
vue2 + vue-cli3 + vue-router + vuex + axios
使用到的工具
vue-lazyload: 实现图片懒加载
fastclick: 解决移动端点击300ms延迟
Iconfont: 本项目包含的所有图标均来源于此
(本项目未使用UI框架)
api调用
网易云音乐 NodeJS 版 API
网易云音乐（Cloudmusic）API
项目截图
功能实现
- ios版网易云音乐界面的五个模块(
- 基本的播放暂停、上下一曲
- 播放顺序调整、进度条拖拽
- 歌词滚动
- 音乐搜索
- 推荐歌单
- 推荐MV
- 增删改查歌单(使用localStorage存储，右滑可以删除歌单或将歌曲移出歌单)
因要开始准备学校挑战杯，所以本项目开发暂告一顿落，等以后有时间还会继续开发新功能，预期添加的功能包括：查看歌曲评论、用户登陆、每日推荐、查看动态...
目录结构
src
|—— api 调用api
|—— assets 图标库
|—— components 组件库
| |——base 基础组件
| |——explore 发现页面
| |——video 视频页面
| |——myself 我的页面
| |——friend 朋友页面
| |——user 账号页面
|—— css 各个组件的样式
| |——base
| |——explore
| |——video
| |——myself
| |——friend
| |——user
|—— router 路由配置
|—— store vuex状态管理
|—— App.vue 根组件
|—— main.js 入口
总结
有一个项目开发进行实操，有时候确实比一直看文档要有用的多。看文档和一些技术贴有时候会因为尚未接触到那些问题而没有什么想法，边在实操中发现问题边针对性地学习有时候不失为一种好的学习方法。本项目的开发过程也遇到过不少问题，几乎思考一阵子或是求助于Google和StackOverflow就可以解决掉了，也算是锻炼了一下在项目开发中发现问题和解决问题的能力吧。有些可惜的是，因所学有限，该项目尚未进行性能优化以及兼容性处理，可能在不同的设备和浏览器上会有意料之外的效果，等以后学到了更多后再陆续优化吧，目前得把时间投入到新任务中去了，现在写下这篇总结算是对这阵子开发的收官吧。(可以的话也请大佬们指点指点啊，感谢~)
如果您发现有什么问题或是有什么想法，欢迎issues和PR。
如果您觉得这个仿网易云音乐还算不错，可以在GitHub上点个star，非常感谢您的认可和鼓励，谢谢~
