Vue 全家桶实现移动端酷狗音乐功能

 更新时间:2018年11月16日 10:22:27   作者:xianshenglu  
这篇文章主要介绍了Vue 全家桶实现移动端酷狗音乐功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

Vue 已经用了不少时间,最近抽空把以前的未完成的酷狗音乐做完了,过来分享下,也可以直接点这里预览,注意切换成手机模式。

技术栈: vue-router、eventBus、vuex、vue-awesome-swiper

整体功能 vs 酷狗官网:

总体模拟官网,原来的亮点保留,如:

  1. 图片懒加载

除此之外,增加了

  1. 加了全局的 Loading 组件,根据不同页面调整 Loading 尺寸
  2. 搜索页面做了优化,可以在刷新时保留之前的搜索结果
  3. 播放页面单独做了一个路由,可以在刷新时保留当前歌曲页面
  4. 播放器的常驻以及滚动时最小化,避免遮挡歌曲名称
  5. 部分可以重用,极少更新的数据,譬如主页四大栏,避免了数据的二次请求。
  6. 增加了主页四栏手势滑动切换
  7. 歌词滚动等
  8. ...

如果参考网易云,后续可以加的新功能还有一些,不过暂时我要先去做其他事了。

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 请求传公共参数的操作

    Vue 请求传公共参数的操作

    这篇文章主要介绍了Vue 请求传公共参数的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07
  • vue中音频wavesurfer.js的使用方法

    vue中音频wavesurfer.js的使用方法

    这篇文章主要为大家详细介绍了vue中音频wavesurfer.js的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 深入对Vue.js $watch方法的理解

    深入对Vue.js $watch方法的理解

    本篇文章主要介绍了深入对Vue.js $watch方法的理解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧。
    2017-03-03
  • Vue实现百度下拉提示搜索功能

    Vue实现百度下拉提示搜索功能

    这篇文章主要为大家详细介绍了Vue实现百度下拉提示搜索功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-06-06
  • 源码分析Vue.js的监听实现教程

    源码分析Vue.js的监听实现教程

    这篇文章主要通过源码分析介绍了Vue.js的监听实现,文中通过示例代码介绍的非常详细,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。
    2017-04-04
  • vue项目中的webpack-dev-sever配置方法

    vue项目中的webpack-dev-sever配置方法

    下面小编就为大家分享一篇vue项目中的webpack-dev-sever配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • Nuxt.js 静态资源和打包的操作

    Nuxt.js 静态资源和打包的操作

    这篇文章主要介绍了Nuxt.js 静态资源和打包的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue-cli脚手架的安装教程图解

    vue-cli脚手架的安装教程图解

    vue-cli脚手架模板是基于node下的npm来完成安装,这篇文章主要介绍了vue-cli脚手架的安装教程图解 ,需要的朋友可以参考下
    2018-09-09
  • 使用vue-router切换页面时,获取上一页url以及当前页面url的方法

    使用vue-router切换页面时,获取上一页url以及当前页面url的方法

    这篇文章主要介绍了使用vue-router切换页面时,获取上一页url以及当前页面url的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue在App.vue文件中监听路由变化刷新页面操作

    vue在App.vue文件中监听路由变化刷新页面操作

    这篇文章主要介绍了vue在App.vue文件中监听路由变化刷新页面操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论