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

5

前言

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

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

爬取网易云音乐的api地址

在线预览

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

主页


源码解析

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项目地址前端小江

如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

载入中...