After I got started with vue.js, the first project I chose was the music player. I used THE API of QQ Music, and the interface imitated the “soft listen” of Tencent’s local music player, with functions including recent play, add to like, list details, singer details and album details. The technology stack is basically vUE family bucket, VUE-Router, VUex, ES6 features (under study), Webpack, Express……
The source code
I wrote a lot of notes for your reference: 😁github
Project preview: 😝 Welcome to star~
Hd code free preview
Technology stack
- Vuex: It’s a great tool for data management. Using component state sharing properly can get you more bang for your ass
- Better Scroll: the best mobile scroll plugin, but very good, very good effect
- Webpack: Used to pack, compress, and lazily load pages to speed up the first load
- Good-storage: encapsulates localStorage, easy to use, save the user’s favorite list, search history
conclusion
- Data binding: VUE’s responsive system is data-driven, with computational properties changing DOM nodes as data changes. Nodes and computed properties depend on data, and it is important to manage these dependencies. For example, in the project, adding a song to my favorite, playing recently, deleting search history, and switching songs will change the DOM node according to the data changes.
- Componentization: An application is divided into multiple components. These components are integrated organically to abstract basic components and improve coding efficiency
- Data capture: QQ music API is quite obvious, with Chrome can be easily obtained. Usually with FCG
