Imitating Netease Cloud Music (WebApp)

Project Address

Thanks to Binaryify for letting me make my own player with what I love!

Source address shameless star ha ha ha!!

1mhere.cn (Press F12 on PC to switch to mobile debugging mode for better effect!)

(Mobile terminal can scan code directly)

Technology stack (technology)

Vue2.0 + VUex + VuUe-Router2.0 + ES6 + AXIos + vux + less + FlexCopy the code

File structure

├─ Build Service and WebPack Configuration ├─ Config Project Different environment configuration ├─ dist Project Build directory ├─ index.html Project import file ├─ Package. json Project Configuration file ├─ Static static resource ├ ─ ─ the SRC directory | production - API API list and data processing | -- - | -- apiList. Js API list | -- - | -- getData. Js data processing (encapsulate a axios request) | - assets Static resources (img, less) | -- - | - img static image | -- - | | - style style file - components common component | -- - | - bottomSongList players | -- - | - headerNav playlist component Head navigation components | -- - | - music music component | - page page components | | -- - | - albumsListDetails album content component | -- - | | - how personality recommended components -- searchList search list component | -- - | | -- - | -- - singer singer component songDetails song details component | -- - | -- - | | -- - | -- - player player components songList song ca | -- - | -- songListDetails playlists components for details | -- - | | - | topList list components - the router routing component - store data state management component | - util utility methodsCopy the code

Project Function

Finish function

  • Personalized recommendation, song list, chart page

  • Slide function (slide left and right to switch menu)

  • Playback function (fast forward, fast rewind, previous song, next song, lyrics synchronization, etc.)

  • Search function (Hot Search, singles, artists, albums, playlists, Users)

  • Playlist function (latest, hottest, exquisite playlist and details display)

  • Artist album Features (Introduction and Details)

  • Ranking function (Cloud Music official version)

Effect picture

Probject Running

Git clone github.com/webfansplz.

2. Install dependent environment: NPM install

3. Start project: NPM run dev

4. Package project: NPM Run Build

Summary (summary)

This project started from my interest, there are still many deficiencies, you are welcome to exchange and discuss learning, like a star bai, ha ha ha!!