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

預覽圖