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

2019年9月9日 85次阅读 来源: 江樱

前言

使用vue cli3构建的SPA移动端网页,有搜索、播放、和歌单功能。

整体UI就是网易云音乐官网的，部分组件用到了vux。播放功能就一个组件没写单独页面，用的是原生的H5。

爬取网易云音乐的
api地址。

在线预览

  • 点击这里预览，PC端推荐在chrome调试模式下预览，手机端直接点击链接。
  • 网页效果截图：

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

源码解析

src目录解析：

│  App.vue
│  main.js
│  router.js
│
├─api //api配置文件夹
│      common.js
│      config.js
│
├─assets //静态图片资源
│      find.svg
│      hot_bg.jpg
│      hot_icon.png
│      play.png
│
├─components
│  ├─HomeBottom //主页底部组件
│  │      foot.svg
│  │      footbg.png
│  │      index.vue
│  │
│  ├─HomeTop //主页头部组件
│  │      index.vue
│  │      logo.svg
│  │
│  ├─HotWord //热门搜索词
│  │      index.vue
│  │
│  ├─MusicPlayer //播放器组件
│  │      index.vue
│  │
│  ├─RecommendList //推荐歌单
│  │      index.vue
│  │
│  ├─SongItem //歌曲组件
│  │      index.vue
│  │
│  ├─TabIndex //tab的首页
│  │      index.vue
│  │
│  ├─TabRank //tab的排行榜页
│  │      index.vue
│  │
│  └─TabSearch //tab的搜索页
│          index.vue
│
├─store //vuex
│      actions.js
│      getters.js
│      index.js
│      mutation-types.js
│      mutations.js
│      state.js
│
├─styles
│      playlist_page.css
│      remd_list.css
│      song_item.css
│
└─views
        HomePage.vue  //主界面
        PlayListPage.vue //歌单页
  • 技术栈：vuex vue-router vux(UI库) axios

新手学vue，代码肯定有很多糟糕的地方.如果不嫌弃可以给个Star

github项目地址，
前端小江

    原文作者：江樱
    原文地址: https://segmentfault.com/a/1190000017044281
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞