青草音乐移动app

这是一个使用vue全家桶仿网易云音乐的app，如果以后学习到更多知识会继续在不能webapp中继续实现

技术栈

​ vue作为技术框架、vue-router实现单页应用、vuex实现数据状态管理

​ 同时使用element-ui和muse-ui作为UI框架搭建页面

​ 使用axios接收调用后台api拿到响应数据

​ stylus预编译、图片懒加载lazyload

运行截图（功能）

发现界面

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/1.PNG

歌单界面

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/2.PNG

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/3.PNG

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/music5.gif

热门mv

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/4.PNG

热门歌手

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/music2.gif

搜索界面

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/music3.gif

登录界面

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/5.PNG

每日推荐（需要登录）

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/6.PNG

电台节目（播放）

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/music4.gif

榜单排行榜（未完善）

![image]https://github.com/ZzOoz/QCmusicApp/blob/master/image-folder/7.PNG

运行

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

最后

此app是通过网易云提供的api基于node后台实现的

网址：https://github.com/Binaryify/NeteaseCloudMusicApi