# vue-music-1 **Repository Path**: pingm/vue-music-1 ## Basic Information - **Project Name**: vue-music-1 - **Description**: 从零开始 ! 试图做网易云音乐播放器了！ - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-02-07 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README ![](https://img.shields.io/badge/vue-2.2.6-4EDD96.svg) ![](https://img.shields.io/badge/stylus-0.54.5-F6B386.svg)  ![](https://img.shields.io/badge/vue_awesome_swiper-2.5.4-FD9494.svg) ![](https://img.shields.io/badge/vuex-2.3.1-69D3E3.svg) ![](https://img.shields.io/badge/axios-0.16.2-56DD7F.svg) ### 10 月 23 日更新 ### 发现在ios 移动端体验有问题 修改了部分效果，至于音乐播放详情页（CD转动 播放页）的体验问题 （拖动卡顿，歌词效果不好等等） 我在我vue-website  有解决方法 附上对应的代码地址 和 体验效果 拖动的体验效果： http://www.daiwei.org/components/wx-audio/html/audio.html
歌词滚动的体验效果： http://www.daiwei.org/#/music/sheet/124995419  
对于的歌词解析以及滚动效果代码 见 ：
https://github.com/IFmiss/vue-website/blob/master/src/components/music/music.js#L157  
如有问题  尽管联系我！
##### 由于本地数据的音乐地址有变化，现在已经可以正常使用了   更新一下就行了   改了data.json的音乐url！ 学习vue ，从0开始！ 原本是学习vue而创建的，之后想在学习过程中加以实践。由于之前有做过jquery的播放器效果，ui仿照网易云，地址 www.daiwei.org/music ,于是就想做vue 的网易云播放器，网上也有类似的项目。看了一下都挺不错的，于是就想自己做一个试试 PC浏览地址 : http://www.daiwei.org/vue-music.html 手机扫描查看效果,云虚拟主机速度可能会比较慢,望理解. ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/1499612377.png) #### 项目基于Vue,涉及axios vue-router vuex ###### 本人也是一枚小白,自学Vue,这个播放器有什么不足之处,希望各位可以提出意见建议,我们共同学习进步.学的不错的话  可以Star一下哦!!! #### 最近在更新个人网站,vue重新打造的个人网站2.0  搭配主页，状态，音乐，关于，每日笑话，天气，设置等，注重数据交互以及用户体验  地址： https://github.com/IFmiss/vue-website    在线预览地址： http://www.daiwei.org/new.html 项目下载到本地之后 
  npm install

  npm run dev
即可查看效果 ### 效果图
#### 首页侧边栏以及部分组件 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part1.gif) #### 视频播放以及浮层音乐列组件 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part2.gif) #### 音乐详情页 播放暂停效果 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part3.gif) #### 音乐详情页切歌 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part4.gif) #### 歌单详情页（背景效果 滚动效果） ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part5.gif) #### 歌单专辑图片下载页 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part6.jpg) #### 音乐详情歌词切换 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part7.gif) #### 发现音乐swiper效果 ![](https://github.com/IFmiss/vue-WangYiCloudMusic/blob/master/static/images/showdemo/part8.gif)