Vue家庭水桶实现移动酷狗音乐功能

Vue用了很多时间。最近，她花时间完成了未完成的酷狗音乐。快来分享，或者点击这里直接预览，注意切换到手机模式。

技术栈：vue-路由器、eventBus、vuex、vue-awesome-雨刮器

整体功能vs酷狗官网：

官网整体模拟，保留原有亮点，如：

图片懒得加载。此外，它们被添加

添加全局加载组件，根据不同页面调整加载大小，优化搜索页面。它可以在刷新时保留以前的搜索结果，并为页面的播放制作单独的路线。它可以在刷新时保留当前歌曲页面的常驻播放器，在滚动时最小化，避免阻塞歌曲名称中可重用的部分和很少更新的数据，如主页的四列，从而避免数据的二次请求。在主页的四栏中增加了手势滑动切换歌词滚动.如果参考网易云的话，有一些新的功能可以以后添加，但是我得先做其他的事情。

CSS不难，都是手写的，采用的是BEM标准，js是ESLint。

整体难度适中。但是如果标准化、组件化、抽象化，任务还是很多的，具体的坑我就不说了。源代码在这里。建议想熟悉vue的同学自己试试。

作为一个手部训练项目，vue的全家桶已经覆盖。当然，如果只使用vue和vue-router来实现，也不是没有可能。如果你实现了一大半，你就会明白为什么要全家桶了。

至于酷狗的界面和跨域问题，解决方案都在README里，其他作者分享整理。感谢ecitlm和JsonBird。

Src/文件目录：

| _ _ app . vue | _ _ assets | _ _ CSS | _ _ base . less | _ _ constant . less | _ _ icon font . CSS | _ _ reset . CSS | _ _ images | _ _ logo _ _ grey . png | _ _ logo _ _ text . png | _ _ logo _ _ theme . png | _ _ js | _ _ API . js | _ _ bus . js | _ _ global event . js | _ _ mobilelayout . js | _ _ utils . js | _ _ components | _ _ _ _ PubModuledes . vue | _ _ PubModulehead . vue | _ _ PubModuletitle . vue | _ _ rankinfo . vue | _ _ ranklist . vue | _ _ search | _ _ search . vue | _ _ singer cartegory . vue | _ _ singer rinfo . vue | _ _ singer list . vue | _ _ songLiST . vue | _ _ songLiST . vue | _ _ songListinfo . vue | _ _ main . js | _ _ mix

以上就是边肖推出的Vue家庭水桶，在移动终端上实现酷狗音乐功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！