Experience Vue3.0, imitating a netease cloud music client
preface
In the summer of 19 years, I created netease Cloud music beautiful webApp. At that time, I happened to be learning React. I followed the steps of the big guy and began to imitate him. Then I wrote a client web page with React (the layout of the previous version of netease Cloud). Now, because the technology stack of the company I work for is vue, although the player is bad, but I think this theme is good for practice, so take advantage of 3.0 release, to learn a wave!
The code address
Chrome opens better with the new Edge.
First, the technology stack used
Front end:
vue3.0
Buckets of + JSX (ts)vuex
: vuex-module-decoratorsswiper
: a very popular and useful wheel map plug-in,swipercreate-keyframe-animation
Keyframe animation pluginaxios
: Data request
The backend:
- NeteaseCloudMusicApi is the open source API of netease CloudMusic NodeJS version on Github
Other:
Stylelint, stylelint-config-standard, stylelint-Order
: CSS standard detection tool, recommended configuration, and attribute sorting plug-in
Ii. Overall structure and partial demonstration of the project
The basic structure
1. Recommendation module and playlist-related module
2. Singer module, list and latest music
3. Lists and players
4. Search for video related parts
Third, insufficient
In fact, there are many places not perfect, such as theme switch, thought of using CSS variables to do it, but because I feel that there are too many places to replace the emasculation, as well as the drop-down refresh place is not good, there is no virtual scrolling, pictures do not have each default figure and so on…
Four, the last
Usually they did not brush the nuggets, read a lot of big guy to write the code, feel that they really write a lot of poor, so the code specification, code style may also be unsatisfactory, if there is a bad place welcome to point out improvement, thank you!
Refer to the link
- Vue3.0 Chinese official website
- Vue 3 gets you up to speed in 30 minutes
- Quick access to Vue3’s latest 15 commonly used apis
- 🚨 10,000 word warning awesome Vue3 (1)
- Element-plus