Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)

Time:2022-3-2

Build Netease cloud music player based on vue3 + typescript + vite2

Vue3, composition API

Vite2 asked lightning ⚡

Third party Netease cloud music player

Online experiencePingMusic Log in and experience more

GitHub portalGuys, point a star ✨

UI inspiration: QQ music, Apple Music


⚙️ Project technology stack

📯 Vue v3.x

🎺 Vite v2.x

🎸 Vue Router v4.x

🥁 Vuex v4.x

🎹 Typescript

function

Support logging in to Netease cloud account, listening to private song lists and collecting favorite music

Selected recommendations

✨ Exclusive release

Classified song list

Ranking list

Singer browsing

New song express

Video MV playback

Song list details

Singer details

Play interface

Some functions need to be improved

More features are under development

The source code is here

(https://github.com/YongHengFu/ping-music-next)Guys, point a star ✨

Screenshot of interface

Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)
Build a Netease cloud music player based on vue3 + typescript + vite2 (did you learn vue3 and vite2)

last

Although the completion degree is OK at present, there are still many functions to be improved, but the goal of learning vue3 and vite has been achieved. Vite is really cool to use. Vue3’s composition API was not used to writing at the beginning, but later How delicious!!!

At the beginning, ant design was used to build the framework, but later it was written that ant design was used, but most of them were custom styles, so it was completely handwritten (layout still uses ant design, so remove it when you have time)

The most time spent on the whole project should beLyrics scrollingNow, looking back, I find that there is still a large optimization space. I will reconstruct this one later.

Here is the source code:

(https://github.com/YongHengFu/ping-music-next)Guys, point a star ✨

Recommended Today

redis day2

persistence mechanism client redis[memory] —–> memory data-data persistence–>disk Redis officially provides two different persistence methods to store data in memory to the hard disk: Snapshot AOF (Append Only File) only appends log files   Snapshot Features:In this way, all data at a certain moment can be written to the hard disk, of course, this is […]