/vue-music-player

Vue.js写一个音乐播放器.A music player by Vue.js

Primary LanguageJavaScript

Vue.js写一个音乐播放器

在线预览

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

源代码

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

介绍

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

About

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

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.