用Vue做一个模仿网易云音乐的单页面应用

一名大四学生利用Vue.js开发了一个简易版网易云音乐单页面应用,实现了推荐歌单、最新音乐等功能。项目使用vue2+vuex+vue-router等前端技术栈。

说明

楼主是一名准大四生了,在暑假花了十多天做的一个单页面应用,目的是为了熟悉一下Vue.js的开发。

网易云音乐APP的功能模块非常多,目前仅仅完成了推荐歌单最新音乐排行榜播放器搜索歌曲和歌手歌手单曲查看评论等一些基本的功能。

所有需要登录才能使用的功能目前都尚未开发。

由于获取网易云数据的方式比较特殊,有时候请求数据的时间会偏久一点(为此自己也做了缓存机制来缓解这一问题)。

第一次分享自己的小项目,还望各位大佬多多支持哈

项目地址

https://github.com/SlowSoulWe...

项目预览

手机请扫描下方二维码预览

手机预览

PC端预览地址(只做了移动端适配,请将浏览器设置为手机预览模式)

www.wenguangblog.cn:8080

前端技术栈

vue2 + vuex + vue-router + vue-awesome-swiper + axios + webpack

后端

所有数据都来自网易云音乐,API由 NeteaseCloudMusicApi 提供

自己在该项目基础上增加了IP代理及缓存机制,以防止网易封禁IP,提高请求速度及减少API的请求频率。

效果演示

首页

歌单页

搜索页

播放页

评论页

安装


$ git clone git@github.com:SlowSoulWen/vue-music.git

$ npm install

运行


$ npm run dev
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值