The online preview

Online Preview Address 1: 🔗microzz.cn/vue-music/ Online preview Address 2: 🔗microzz.github. IO /vue-music-p…

The source code

GitHub address: 🔗github.com/microzz/vue… Welcome to follow and Star oh 😄

introduce

After learning vue.js, I decided to do a small project to exercise, so I chose a typical music player to get started. Encountered a lot of pits, but also learned a lot. There may be some flaws in the code. Welcome to my GitHub for feedback and mutual exchange and learning. Also welcome to follow and star😄 preview:













Technology stack

Vue.js

Vue’s two-way data binding is really cool, allowing developers to focus more on business logic rather than performance-hungry DOM manipulation. Using well-known frameworks like React. Js and Angular.js, Vue is really easy to write and thoughtful in many ways. Because the actual scenario does not use routing, VUex, etc. There are a few notable points:

  1. The use of goodwatchYou’ll get twice the result with half the effort
  2. Some operations need to finish loading the instance, so hook functionsmountedNeed to pay attention to
  3. A lot of small skills to try just know to go astray 😂

ES6

This example uses ES6 syntax, and since WebPack is compiled, you don’t have to worry too much about compatibility issues. ES6, also known as ECMAScript 2015, has been released for a while now, and many places are convenient. This is the general trend, and will slowly migrate to ES6 in the future. Mastery is essential!

HTML5

LocalStorage This demo uses localStorage to store user Settings (such as skins) and user song lists

CSS3

A lot of animation is to rely on CSS3 to complete, convenient performance is good, the disadvantage is compatibility problems.

Update record

2017.03.13

A music player by vue.js. A music player written by vue.js, today completed the general function of the player, data is simulated through JSON

Further improve the

  1. Build background call online music API
  2. Perfect function

2017.03.14

List part of the function is perfect, part of the code optimization, part of the asynchronous code Promise

Further improve the

  1. Redundant code integration optimization
  2. Partial code encapsulation

2017.03.15

Release 1.0.0 official

About

Personal website: 🔗microzz.com/ GitHub: 🔗github.com/microzz

Last Updated:



Please indicate the source of reprint:
Microzz.com/2017/03/15/…