preface

In order to learn vite and familiar with vue3 grammar, made this imitation of netease cloud music H5, welcome everyone to discuss.

preview

address

  1. Online access address: online
  2. Git address: vite-demo

Technology stack

  1. vue3 + vue-router4 + vuex4
  2. Vant3 (UI Framework)
  3. typescript

The directory structure

├ ─ ─ the README. Md ├ ─ ─ dist │ ├ ─ ─ assets │ ├ ─ ─ the favicon. Ico │ └ ─ ─ index. The HTML ├ ─ ─ hosts ├ ─ ─ index. The HTML ├ ─ ─ node_modules ├ ─ ─ Package - lock. Json ├ ─ ─ package. The json ├ ─ ─ postcss. Config. Js ├ ─ ─ proxy. Ts ├ ─ ─ public │ └ ─ ─ the favicon. Ico ├ ─ ─ the SRC - SRC │ ├ ─ ─ App. Vue │ ├ ─ ─ API - interface and axios encapsulation │ ├ ─ ─ assets │ ├ ─ ─ components -- components │ ├ ─ ─ main. Ts │ ├ ─ ─ page │ ├ ─ ─ the router - routing │ ├ ─ ─ Shims - vue. Which s │ ├ ─ ─ store data - state management │ └ ─ ─ utils - public methods ├ ─ ─ tsconfig. Json └ ─ ─ vite. Config. Ts - configuration fileCopy the code

function

  1. Set up the overall structure of the project
  2. Axios encapsulation
  3. Proxy configuration
  4. Project deployment (deployment to Vercel)
  5. Eslint/prettierrc configuration
  6. autoprefixerconfiguration

instructions

This function only realizes the recommendation list, song list page and small player, but I have no idea to improve the function for the time being, because

  1. Sparrow is small, five viscera, as a musical class of H5, its minimum logic has been completed
  2. My goal has been reached, I have used all the vite and VUE3 buckets I hope to learn, and the subsequent improvement of the function is not very good for me personally.

Looking forward to the next opportunity to improve this project

Thank you

Finally, thanks to Binaryify for their open source project NeteaseCloudMusicApi, I can use the interface directly and concentrate on the front end