After learning vueJS, I always wanted to do a project to exercise myself. I chose to do it or to make netease cloud music. During the process, I encountered many difficulties and gradually accepted the componentalization idea of VUE and changed from Dom operation to data-driven view. And I borrowed the elementUI source code for some of the base components (elementUI is well written though)

Technology stack

  • Vue.js
  • Vuex
  • Vue-router
  • axios
  • The API provided by Binaryify also knows how data is transferred between components in different scenarios (parent-child Prop, sibling EventBus, multiple components sharing VUex)

Completed function

  • Home page
  • Player function – previous song, next song, pause and other functions
  • Playlist display/details page
  • Album showcase/details page
  • Singer showcase/details page
  • The words list
  • Single Details Page
  • comments

Project running

NPM istall NPM run dev // Start Node app.js in the 163Api file pathCopy the code

Problems encountered

  1. It is too redundant to write one by one because of the many API interfaces used. After reading the articles on digging Gold, I decided to use Proxy Proxy method
import axios from 'axios';

axios.defaults.baseURL = `http://localhost:3000`

export const api = new Proxy({}, {
  get(target, prop){
    let method = /^[a-z]+/g.exec(prop)[0];
    let path = prop
              .substring(method.length)
              .replace(/([A-Z])/g, '/ $1')
              .replace(/(\$)([a-z]+)/g, '? $2 = ')
              .toLowerCase();
    return function(data = "", options = {}, and=false) {let url = `${path}${data}`;
      if(and){
        for(let [key, value] of Object.entries(options)){
          url += `&${key}=${value}`; }}return axios({ method, url })
    }
  } 
})

Copy the code
  1. In the overall project design, I advise you that in the construction of the project, it is best to plan the flow of data and the interaction of each component in advance, otherwise there will be a lot of redundant code, which will be very troublesome to modify later
  2. Component shared state. The common data transfer methods in VUE are props,EventBus, and VUex, which can be used in different application scenarios
  3. Performance problems. The score of 37 on the Chrome Lighthouse test is undoubtedly unqualified. I will learn related knowledge of performance optimization in the future and take performance problems into account in future updates

The project address

Source code, I hope you point out the shortcomings of my code, more communication, also welcome to follow and star

preview