vue全家桶构建的网易云音乐
Switch branches/tags
Nothing to show
Clone or download
Permalink
Failed to load latest commit information.
.idea readme Jul 26, 2017
build add uglify-es to compress es6 Nov 23, 2017
config update Jul 26, 2017
screen update Jul 26, 2017
src 添加注释 Jul 24, 2017
static update Jul 26, 2017
.babelrc first commit Jun 9, 2017
.editorconfig first commit Jun 9, 2017
.gitignore add uglify-es to compress es6 Nov 23, 2017
.postcssrc.js first commit Jun 9, 2017
README.md readme Aug 18, 2017
index.html update Jul 26, 2017
package.json add uglify-es to compress es6 Nov 23, 2017

README.md

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字体图标方案,相比于使用图片图标有许多优势,比如任意缩放、改变颜色、响应式适配设备等等,具体可以参考这篇文章

功能

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

部分截图