韶关区号,铜锣烧,加贺美セイラ
vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式。
技术栈: vue-router、eventbus、vuex、vue-awesome-swiper
整体功能 vs 酷狗官网:
总体模拟官网,原来的亮点保留,如:
除此之外,增加了
如果参考网易云,后续可以加的新功能还有一些,不过暂时我要先去做其他事了。
css 觉得不难,都是手写的,采用的是 bem 规范,js 是 eslint。
总体难度适中,只不过,如果规范化,组件化抽象,任务还是不少的,具体的坑我就不说了,源代码都在这里,推荐想要熟悉 vue 的同学也自己试下。
作为一个练手项目,vue 全家桶都覆盖到了,当然,如果你只用 vue 和 vue-router 去实现,也不是不行,实现到一大半,就会明白为什么要全家桶了。
至于酷狗的接口以及跨域的问题,解决方案都在 readme 里,都是借用的其他作者的分享与整理,在此还是要感谢下 ecitlm 和 jsonbird。
src/ 文件目录:
|__ app.vue |__ assets |__ css |__ base.less |__ constant.less |__ iconfont.css |__ reset.css |__ images |__ logo__grey.png |__ logo__text.png |__ logo__theme.png |__ js |__ api.js |__ bus.js |__ globalevent.js |__ mobilelayout.js |__ utils.js |__ components |__ main.vue |__ new_song |__ newsong.vue |__ slider.vue |__ player |__ nextbutton.vue |__ playbutton.vue |__ playerlyrics.vue |__ playermax.vue |__ playermed.vue |__ playerprogress.vue |__ prevbutton.vue |__ public |__ appheader.vue |__ apploading.vue |__ appmusiclist.vue |__ appnav.vue |__ publist.vue |__ pubmoduledes.vue |__ pubmodulehead.vue |__ pubmoduletitle.vue |__ rank |__ rankinfo.vue |__ ranklist.vue |__ search |__ search.vue |__ singer |__ singercategory.vue |__ singerinfo.vue |__ singerlist.vue |__ song |__ songlist.vue |__ songlistinfo.vue |__ main.js |__ mixins |__ index.js |__ loading.js |__ router |__ index.js |__ store |__ device.js |__ images.js |__ index.js |__ loading.js |__ newsong.js |__ player.js |__ rank.js |__ search.js |__ singer.js |__ song.js
总结
以上所述是小编给大家介绍的vue 全家桶实现移动端酷狗音乐功能,希望对大家有所帮助
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论