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

刘厚水发布于2019-08-26 12:24 / 2695人阅读

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

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

服务器托管海外云主机网易云音乐网易云音乐解析网易云音乐下载网易云音乐在线

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

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

Vue全家桶高仿网易云音乐mac客户端版（不像赔十个！！）

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

mgckid 2019-08-26 10:23 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

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

leap_frog 2019-08-29 12:42 评论0 收藏0
Vue.js全家桶低仿网易云音乐(MacOS版) 已新增electron打包pc平台app

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

graf 2019-08-20 17:03 评论0 收藏0