仿⽹易云⾳乐项⽬总结（vue全家桶）
仿⽹易云⾳乐项⽬总结
1、前⾔
这个项⽬是我5⽉份做的项⽬了，之前⼀直没⼼也没空总结，趁现在暑期⽐较闲，写篇博客记录⼀下！
本项⽬基于vue全家桶+elementui开发的前端项⽬。主要实现了页⾯基本样式，播放，歌词，歌单，专辑，歌⼿，视频，搜索，登录，注册，收藏，评论，下载，分类等功能，基本把我平时⽤到的功能都实现了。之前学习vue都是⼀直跟着视频敲的，所以出于学习和练⼿的⽬的，做了这个项⽬，这也是我真正意义上的第⼀个独⽴的项⽬哈哈哈。欢迎⼤家⼀起讨论学习！
2、项⽬效果展⽰
图⽚展⽰
discover页⾯
favorites页⾯
在这⾥插⼊图⽚描述
video页⾯
recommendmusic页⾯
视频展⽰
【vue全家桶项⽬】仿⽹易云⾳乐 附源码和线上demo_哔哩哔哩_bilibili
3、项⽬的页⾯路由结构
页⾯路由结构
4、项⽬的思想思路
1、项⽬总体的思想思路
a、先确定好页⾯的总体布局，初始样式等
b、创建好所有页⾯⽂件，并通过vue-router 写好各个页⾯的路由关系
c、逐个实现各个页⾯的样式和功能
d、通过vuex解决组件和页⾯之间的通信
2、⾳乐播放的思想思路
a、所有的播放播放逻辑交给bottomControl组件执⾏，就是页⾯中最下⾯的操作栏
b、其它所有页⾯点击播放⾳乐时通过vuex将要播放的⾳乐信息传给bottomControl，bottomControl通过watch监听播放⾳乐信息的变化，如果发现改变，就通过传来的⾳乐信息请求最新的⾳乐资源。
...
5、尚未实现的部分
项⽬经过了⼏次更新，基本把我平时⽤到的功能和b站评论提出的建议功能都实现了，⽬前也没有打算再实现新的功能了，后期可能会优化⼀下代码吧，因为这是我的第⼀个项⽬，现在回头看发现有很多值得优化的地⽅，等我有空⼀定（咕咕咕）
6、项⽬中遇到的困难
⼏个⽉前的项⽬了，项⽬中困难有点回忆不起来了，唯⼀能想到的就是当初部署上线折腾了⼀整天哈哈哈，因为之前没部署过也没经验，⽹上的教程可以说是众说纷纭，但照做总是会莫名其妙的报错，最后⾯也参考教程加上⾃⼰⼀顿乱摸整出来了
7、学到的知识
经过这个项⽬，学到的挺多的，因为项⽬量⼤，覆盖的⾯也⼴
a、学会了使⽤proxy代理和nginx代理解决跨域
b、学会了element-ui很多组件的使⽤，例如⽆线滚动，抽屉，拖动条，跑马灯，卡⽚等等，可以说⼤部分组件都⽤上了。
nginx部署前端项目
c、⾃⼰也封装了不少组件，也练习了如何抽离代码封装成组件，并在不同页⾯进⾏复⽤
d、学会了通过Blob下载⽂件
...
8、项⽬中的不⾜
1、这个项⽬是基于浏览器1.25倍缩放进⾏开发的，因为当时刚开始做的头⼏天没发现浏览器开了1.25倍缩放，那时候已经写了好⼏个页⾯的样式了，没办法改了，后⾯⼲脆就将错就错做下去了害。这次也吸取教训了，以后每次做项⽬前都要检查⼀下浏览器有没有开缩放。
9、总结
不知道该说些好，只能说还有很多地⽅还是有优化的空间的，⽐如组件的封装，其实可以做的更好，但有时候为了省事，就草草了事，能⼒不⾜也是⼀⼤原因，所以以后还有很长的路要⾛，继续加油吧！
总体来说，这还是⼀个不错的练习项⽬，⾸先接⼝⾜够的多，好像有200+个，其次这个项⽬也很有趣，覆盖的知识⾯也⼴，我认为我还是从中学习到了不少知识的。
附

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。