Vue.js写一个音乐播放器

Vue音乐播放器2.0升级版已经发布,请看
👉 Vue.js音乐播放器升级版

在线预览

2.0版本预览地址:🔗https://microzz.com/vue-music/
在线预览地址1: 🔗http://microzz.cn/vue-music/
在线预览地址2: 🔗https://microzz.github.io/vue-music-player/

源代码

GitHub地址: 🔗https://github.com/microzz/vue-music-player
欢迎大家follow和star哦😄

介绍

学习Vue.js后,决定做个小项目锻炼一下,于是选择了典型的音乐播放器上手。其中遇到了很多坑,也学到了很多。代码可能还有瑕疵,欢迎大家到我的GitHub反馈,相互交流学习。同时也欢迎大家follow和star😄
预览图:

红色皮肤-microzz.com
红色皮肤-microzz.com

绿色皮肤-microzz.com
绿色皮肤-microzz.com

蓝色皮肤-microzz.com
蓝色皮肤-microzz.com

黑色皮肤-microzz.com
黑色皮肤-microzz.com

技术栈

Vue.js

Vue的双向数据绑定真的很爽,让开发者更多的关注业务逻辑,而不是耗性能的DOM操作。借鉴了React.js和Angular.js等著名框架,Vue写起来也的确很方便,很多地方也想的很周到。因为实际场景,并没有使用到路由、vuex等东西。
其中也遇到了几个值得注意的地方:

  1. 用好watch会事半功倍
  2. 有些操作要在实例加载完,所以钩子函数mounted需要注意
  3. 很多小技巧要试过才知道走了弯路😂

ES6

本示例采用的是ES6的语法,因为webpack编译,所以也不必太过当心兼容性问题。ES6也即ECMAScript 2015,发布也有一段时间了,很多地方很方便,这是大势所趋,以后会慢慢地向ES6迁移。掌握是很必要的!


HTML5

localStorage
本demo用localStorage本地存储保存用户设置(如:皮肤)和用户歌单列表


CSS3

很多动画都是依靠CSS3完成的,方便性能也不错,缺点是兼容性问题。


更新记录

2017.03.13

A music player by Vue.js。一个由Vue.js写的音乐播放器,今天完成了播放器的大体功能,数据是通过JSON模拟

后续完善

  1. 搭建后台调用网上音乐API
  2. 完善功能

2017.03.14

列表部分功能完善,部分代码优化,部分异步代码Promise化

后续完善

  1. 冗余代码整合优化
  2. 部分代码封装

2017.03.15

1.0.0正式版发布


2017.03.19

2.0.0版本筹划…

2017.04.03

2.0.0版本开始

2017.04.08

2.0.0版本完成

Vue音乐播放器2.0升级版已经发布,请看
👉 Vue.js音乐播放器升级版

About

个人网站:🔗https://microzz.com/
GitHub:🔗https://github.com/microzz