vue-music 音樂網站

在學習完vueJS,一直想作個項目來鍛鍊一下,選來選去，仍是作個網易雲音樂，其間遇到了不少坑,也逐漸接受了vue這種組件化的思想以及從Dom操做轉換爲用數據去驅動視圖。而且在某部分基礎組件上借鑑(搬運)了elementUI的源碼(不過elementUI寫的是真好)

技術棧

• Vue.js
• Vuex
• Vue-router
• axios
• Binaryify提供的API 在其中也知道了組件之間在不一樣場景之間的數據傳輸方式(父子prop, 兄弟EventBus,多個組件共享vuex)

已完成功能

• 首頁
• 播放器功能 -- 上一曲, 下一曲, 暫停等功能
• 歌單展現/詳情頁
• 專輯展現/詳情頁
• 歌手展現/詳情頁
• 歌詞列表
• 單曲詳情頁
• 評論

項目運行

npm istall 

npm run dev

// 在163Api文件路徑下啓動

node app.js
複製代碼

遇到的問題

1. 繁瑣的API的調用,因爲使用的Api的接口不少,若是要一個一個寫的話,太冗餘,在看了掘金上一邊文章以後,果斷的用了Proxy代理方式

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 })
    }
  } 
})

複製代碼

2. 總體項目的設計,奉勸你們一句,在項目的構建中,最好提早提早規劃好數據的流通以及各個組件的交互,不然會出現大量冗餘的代碼，後面修改的話會很麻煩
3. 組件共享狀態,在vue中目前經常使用的數據傳遞方式有props,EventBus,vuex根據應用場景的不一樣來使用它們
4. 性能問題，再用chrome的lighthouse測試下才37的評分,無疑是不合格的,後續會學習性能優化的相關知識，在之後更新會考慮到性能問題

項目地址

源代碼,但願你們指出我代碼的不足之處，多交流,也歡迎你們來follow和star

預覽圖