资讯专栏INFORMATION COLUMN

Vue全家桶构建网易云音乐web app

刘厚水 / 2884人阅读

摘要:前言使用构建的移动端网页有搜索播放和歌单功能。整体就是网易云音乐官网的,部分组件用到了。播放功能就一个组件没写多带带页面,用的是原生的。爬取网易云音乐的地址。

前言 使用vue cli3构建的SPA移动端网页,有搜索、播放、和歌单功能 整体UI就是网易云音乐官网的,部分组件用到了vux。播放功能就一个组件没写多带带页面,用的是原生的H5。

</>复制代码

  1. 爬取网易云音乐的api地址。
在线预览

点击这里预览,PC端推荐在chrome调试模式下预览,手机端直接点击链接。

网页效果截图:

源码解析

src目录解析:

</>复制代码

  1. App.vue
  2. main.js
  3. router.js
  4. ├─api //api配置文件夹
  5. common.js
  6. config.js
  7. ├─assets //静态图片资源
  8. find.svg
  9. hot_bg.jpg
  10. hot_icon.png
  11. play.png
  12. ├─components
  13. │ ├─HomeBottom //主页底部组件
  14. │ │ foot.svg
  15. │ │ footbg.png
  16. │ │ index.vue
  17. │ │
  18. │ ├─HomeTop //主页头部组件
  19. │ │ index.vue
  20. │ │ logo.svg
  21. │ │
  22. │ ├─HotWord //热门搜索词
  23. │ │ index.vue
  24. │ │
  25. │ ├─MusicPlayer //播放器组件
  26. │ │ index.vue
  27. │ │
  28. │ ├─RecommendList //推荐歌单
  29. │ │ index.vue
  30. │ │
  31. │ ├─SongItem //歌曲组件
  32. │ │ index.vue
  33. │ │
  34. │ ├─TabIndex //tab的首页
  35. │ │ index.vue
  36. │ │
  37. │ ├─TabRank //tab的排行榜页
  38. │ │ index.vue
  39. │ │
  40. │ └─TabSearch //tab的搜索页
  41. index.vue
  42. ├─store //vuex
  43. actions.js
  44. getters.js
  45. index.js
  46. mutation-types.js
  47. mutations.js
  48. state.js
  49. ├─styles
  50. playlist_page.css
  51. remd_list.css
  52. song_item.css
  53. └─views
  54. HomePage.vue //主界面
  55. PlayListPage.vue //歌单页

技术栈:vuex vue-router vux(UI库) axios

</>复制代码

  1. 新手学vue,代码肯定有很多糟糕的地方.如果不嫌弃可以给个Star
    github项目地址,前端小江

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108644.html

相关文章

  • Vue全家高仿网易音乐mac客户端版(不像赔十个!!)

    摘要:库用了魔改样式的歌词滚动部分用了黄轶老大的贼爽主题换肤用的变量替换。语言的下一代标准预处理器安装与使用前端项目后端项目 音乐播放器虽然烂大街了,但是作为前端没自己撸一个一直是个遗憾,而且偶然间发现pc端web版的网易云音乐做的实在是太简陋了,社区仿pc客户端的网易云也不多见,为了弥补这个遗憾,就用vue全家桶模仿mac客户端的ui实现了一个,欢迎提出意见和star~ 预览地址 源码地址...

    mgckid 评论0 收藏0
  • Vue.js全家低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    leap_frog 评论0 收藏0
  • Vue.js全家低仿网易音乐(MacOS版) 已新增electron打包pc平台app

    摘要:项目地址暂时只实现了基本功能加了一点微小的效果主要适配浏览器对和做了一点微小的适配现在已经包括了打包平台的功能了源码地址项目预览项目描述前端部分整体加载进度懒加载模块的加载中提示实现了滑块增量分页新曲等使用了做单页应用使用了处理路由使用了管 项目地址 暂时只实现了基本功能 加了一点微?小的效果 主要适配pc浏览器 对android 和ios 做了一点微?小的适配 现在已经包括了ele...

    graf 评论0 收藏0

发表评论

0条评论

刘厚水

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<