脚本宝典收集整理的这篇文章主要介绍了

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项目地址

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过