一、專案後端搭建

1.下載所需後端檔案：

（後端api原始碼）

 2.將專案原始碼解壓至專案中並進行--node app.js執行

二、專案建立

（1）通過vue-cli建立專案：vue create music001

（2）選擇並下載專案依賴包

（3）專案建立成功後執行專案 npm run serve

三、發現頁面的效果實現

（1）建立頁面，在頁面中引入頭部導航、輪播圖、icon圖示、發現歌單元件

（2）引入rem.js檔案，用來控制文字大小

（3）頭部導航：

   1.在components建立元件topNav.vue為頭部導航頁面

         2. 新增到發現頁

         3. 引入

（2）輪播圖：

   1.下載並使用依賴包swiper vue-awesome-swiper 與 swiper@5 建立檔案

   2. 引入swiper.css 與 swiper 檔案

   3.通過swiper.css 與 less 檔案建立元件css樣式

   4.通過Swiper物件函式 繫結操縱物件並對物件下元素進行輪播

   5.分頁器的設定：用pagination關聯標籤、繫結物件，以及設定能否進行點選

（3）icon圖示：

             1. icon阿里巴巴圖示庫選擇並獲取圖示

    2.圖示入庫後複製svg連結

    3.新增到專案所需圖示位置進行使用icon圖示

（4）資料的發現與使用：

            1.引入getLimit及生命週期函式

    2.呼叫請求到的資料並獲取資料

    3.設定Setup函式並儲存獲取的歌單列表資料

    4.設定一定條件下觸發生命週期函式，並進行輪播模組部分的設定 包括內容顯示及內容間距的設定

四、歌單詳情頁面

（1）引入相關檔案、元件及生命週期函式的使用

1.Setup函式定義當前路由資訊物件及儲存當前歌單詳情

2.定義一個物件用來儲存歌單詳情及歌單播放列表用以呼叫替換資料

3.生命週期函式的應用以獲取資料，進入歌單詳情頁面，將歌單中的播放列表傳遞到store的playList中去，commit觸發store物件中mutations函式

（2）元件的設定

1. 歌單詳情元件的設定：

《1》props接收父元件傳遞的資料

《2》設定點選事件，點選返回按鈕返回到發現頁面

《3》獲取真實資料、引入向量圖示以及替換計量單位

2. 歌單列表元件的設定：

   《1》引入並應用接收store中的mustations的setPlayIndex方法

   《2》props接收父元件傳遞的資料

   《3》迴圈顯示出歌單列表並獲取真實資料

   《4》替換計量單位

五、歌曲播放

（1）建立歌曲詳情元件

（2）在全域性播放元件中引入歌曲詳情元件

（3）設定點選事件跳轉頁面顯示及點選取反觸發返回頁面消失

（4）傳遞歌曲詳情、歌曲暫停播放按鈕顯示的條件以及play函式（控制歌曲播放暫停）並在子元件中接收

（5）展示資料

    1.引入向量圖示

    2.獲取真實資料展示

    3.設定動態class繫結，當新增class名稱，active：true為音樂正在播放，active：false為音樂暫停，唱片的唱臂跟隨歌曲的播放暫停同步進行改變

    4.準備一個變數控制唱片與歌詞的切換並使用v-if和v-else進行繫結設定 

（6）歌詞詳情

1.獲取歌詞的api進行封裝，並將其丟擲

2.在mutations中定義一個函式，用來修改歌詞資料

3.獲取歌詞詳情的函式，payload傳遞引數，payload.id當前歌曲的id，content修改歌詞內容為當前獲取的歌詞詳情

4.全域性播放元件獲取歌曲歌詞詳情，使用mounted進行獲取預設當前歌曲的歌詞，預設播放歌曲發生改變時使用updated獲取切換歌曲的歌詞

（7）歌曲切換

1.給歌曲切換圖示設定點選事件繫結goplay方法

2.設定goplay方法獲取切換之後的歌曲下標，同時進行判斷下標小於零即歌曲在第一首時在進行切換則切換到最後一首，而當下標等於歌曲數量長度時即歌曲在最後一首時在進行切換則切換到第一首

六、搜尋模組

（1）建立搜尋模組父元件與搜尋頁面子元件

（2）配置路由以及在父元件中引入子元件

（3）在topNav元件中設定點選引入搜尋頁面

（4）設定子元件搜尋頁面

1.設定向量圖示以及點選返回上一頁

2.設定搜尋以及歌曲列表

    《1》獲取搜尋歌曲的api並對外丟擲

 《2》在子元件中引入並使用

 《3》定義一個物件為使用者輸入框要搜尋的資料以及搜尋資料的儲存

 《4》與搜尋框進行v-model繫結並設定鍵盤事件用以回車搜尋

 《5》鍵盤事件觸發非同步函式，回車之後搜尋的關鍵字賦值給res，res裡邊的歌曲資料賦值給searchSongs並渲染到頁面上

 《6》獲取歌曲資料並使用v-for迴圈歌曲列表展示

3.搜尋列表的播放功能

     《1》定義一個函式，搜尋歌曲點選切換時，將點選的這首歌曲新增到到state的播放列表末尾

  《2》為播放按鈕設定點選事件用來切換歌曲

  《3》設定setPlay函式，轉換搜尋的歌曲資料格式讓其與之前資料列表中格式相同，commit觸發store中mutations的pushPlayList方法，將當前點選歌曲追加到播放列表末尾

      第一種實現方式：

      第二種實現方式：

使用直接呼叫方式：

七、個人中心

1.建立登入頁面和個人中心頁面並配置路由

2.在進入個人中心路由之前，要執行的生命週期函式，判斷使用者是否登入（判斷條件是store中的user中的isLogin）

3.配置登入頁面樣式及獲取資料

4.設定物件儲存使用者賬號及使用者密碼

5.獲取使用者登入驗證的api封裝並丟擲

6.v-model繫結phone輸入手機號及password輸入密碼

7.設定點選事件繫結登入按鈕，獲取輸入賬號密碼。觸發store中登入驗證phoneCheckLogin的函式

8.非同步函式驗證使用者是否登入成功，判斷使用者登入，使用者登入成功，修改使用者的登入狀態為true

9.登陸成功進入個人中心頁面

10.獲取使用者詳情的api進行封裝並丟擲

11.獲取當前登入使用者的詳情，將使用者詳情儲存到state的user資料中

12.去掉a標籤的預設行為，點選事件繫結返回首頁

13.設定個人中心樣式並獲取資料進行展示

14.退出登入點選事件繫結函式logout返回首頁

15.定義一個函式，使用者退出時，刪除user中使用者登陸資料

16.使用者退出登入，刪除store中user使用者登入資料，清空本地儲存資料，返回到專案首頁