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.0Buckets of + JSX (ts)
  • vuex: vuex-module-decorators
  • swiper: a very popular and useful wheel map plug-in,swiper
  • create-keyframe-animationKeyframe animation plugin
  • axios: 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