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

Posted baimeishaoxia

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue全家桶构建网易云音乐web app相关的知识,希望对你有一定的参考价值。

前言

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

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

爬取网易云音乐的api地址

在线预览

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

技术图片技术图片


源码解析

src目录解析:

│  App.vue
│  main.js  
│  router.js
│  
├─api              
│      common.js   //设置请求地址具体url
│      config.js  //api配置相关
│      
├─assets         //静态图片
│      find.svg
│      hot_bg.jpg
│      hot_icon.png
│      play.png
│      
├─components
│  │  Player.vue      //播放功能
│  │  SearchHot.vue   //搜索热词
│  │  Song.vue        //歌曲信息
│  │  SongList.vue    //歌单信息
│  │  
│  ├─Footer  //主页的底部UI
│  │      foot.svg
│  │      foot.vue
│  │      footbg.png
│  │      
│  ├─Tabs   //三大Tab页面,主页/排行榜/搜索
│  │      Home.vue
│  │      Rank.vue
│  │      Search.vue
│  │      
│  └─Top    //主页的头部UI
│          logo.svg
│          top.vue
│          
├─store     //vuex
│      actions.js
│      getters.js
│      index.js
│      mutation-types.js
│      mutations.js
│      state.js
│      
├─style     //css配置
│      foot.css
│      list.css
│      playlist.css
│      song.css
│      top.css
│      words.css
│      
└─views      //路由配置,两个页面,主布局页面/歌单页面
        mainLayOut.vue
        PlayList.vue
  • 技术栈:vuex vue-router vux(UI库) axios
新手学vue,代码肯定有很多糟糕的地方,各位轻喷。如果不嫌弃可以给个Star, emmmm..
github项目地址

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=h01cb0jc2ab

以上是关于Vue全家桶构建网易云音乐web app的主要内容,如果未能解决你的问题,请参考以下文章

用VUEJS做一个网易云音乐

Vue全家桶

项目- Vue全家桶实战去哪网App

Vue2.0 全家桶开发的网页应用(参照吾记APP)

vue全家桶

vue 全家桶介绍