/vue-music

vue全家桶构建的网易云音乐

Primary LanguageVue

vue版网易云音乐

api:ap使用的是一个开源的nodejs封装的网易云音乐api,地址

预览地址(国外的服务器,估计有点慢)

使用步骤

# 下载
git clone git@github.com:tgxhx/vue-music.git

# 安装依赖
npm install

# 运行开发环境
npm run dev

# 构建生产环境
npm run build

技术栈

  • vue2:基础框架
  • vue-router2:路由跳转
  • vuex:全局数据管理
  • es6:采用部分es6特性,大大简化了写法
  • webpack:vue-cli基于webpack,修改了部分配置
  • axios:基于Promise的http库,用来请求数据
  • scss:写起css来十分方便,需要安装sass-loader,另外使用自定义其中的自定义函数配合rem来适配移动端设备简直不要太方便
  • flex:弹性布局,在移动端兼容性较好,写各种布局非常方便
  • vue-material:一个Android上material design风格的组件库

说明

  1. 这个项目大小组件大概二十几个,目前还未完工,以后还会继续更新,目标是还原整个网易云音乐(虽然不知道什么时候能填完坑o(╯□╰)o)。
  2. 关于路由,刚开始设计路由的时候想了很多,由于一开始的目标就是网易云音乐的所有内容,所以设计了三级路由,/root/index/recommed,大概这样,点击查看
  3. 关于体会,写到这个项目也算是对vue全家桶比较熟了,体会就是,不论是简单的复杂的项目,只要分割成一个个组件再拼起来,也没什么难的,组件之间通信又有vuex,也是非常简单的,总之就是熟能生巧。
  4. 关于难点,对于自己来说,audio标签以前没有接触过,有点麻烦,不过还算有相关文档;歌词滚动,参考这里,部分歌曲还是有点问题,待解决;播放器背景图,这个当时考虑了很久,因为网易云音乐的播放器背景图就是当前歌曲的专辑图,还是模糊效果,最后实现方式是在当前组件的二级div设置当前歌曲的背景图,大小覆盖父元素,为防止第一次播放或者切歌的时候没有图,在组件的根元素也设置一张背景默认图,具体可以点击查看;当前歌曲在播放列表中的索引获取,通过es5中数组的findIndex方法,找到当前歌曲的id在数组中的位置,具体可以点击查看
  5. 关于打包后的资源路径,比如要放在二级目录www.xxx.com/music,那么修改config/index.js中的assetsPublicPath: '/music/'即可。
  6. 关于移动设备适配,我使用的是js动态设置html元素font-size的方式,页面元素使用rem,这样可达到在不同设备下显示内容基本一样的效果,具体可以点击,使用方式比如width:100px;可以写成width:pr(100)。
  7. 关于图标,使用的是淘宝的iconfont字体图标方案,相比于使用图片图标有许多优势,比如任意缩放、改变颜色、响应式适配设备等等,具体可以参考这篇文章

功能

  • 首页歌单推荐
  • 歌单详情
  • 播放器
  • 播放暂停
  • 播放模式切歌(顺序和随机)
  • 歌词滚动(待修改)
  • 歌曲拖动
  • 播放器底部背景
  • 播放底栏
  • 底栏歌词同步
  • 播放列表
  • 歌曲评论
  • 搜索推荐
  • 搜索分类

部分截图