專案基本分成了七大模組：

     專案發現模組、歌曲詳情模組、全域性音樂播放元件、歌曲詳情模組、歌曲搜尋模組、使用者登入驗證與登入狀態維持、個人中心模組以及退出登入

1.專案後端搭建

（1）     下載專案所需後端檔案：

（1）     將其通過終端指令node app.js 執行專案所需後端檔案

    開啟之後執行專案：

2.專案建立：

（1）     通過使用vue3-cli來建立專案：vue create music002

（2）     選取並下載所需依賴包檔案

（3）     然後再進行選擇vue的版本及其他選項

（4）     通過終端指令npm run serve執行專案

3.發現頁面的實現

先建立一個HomeView.vue的頁面，再在頁面中引入相關的元件

在public檔案下建立一個js檔案，引入rem.js用來控制專案中的文字大小，在index.html中引入rem.js

向量圖示去阿里巴巴向量圖示庫裡尋找，加好購物車後新增至專案，可線上獲取連結，再引入到頁面

（1）     頭部導航佈局和樣式：

在components中新增topNav元件

樣式：/*space-between 最左、最右item貼合左側或右側邊框，item與item之間間距相等。

space-around 每個item 左右方向的margin相等。兩個item中間的間距會比較大*/

（2）     輪播圖元件

先下載所需要安裝的包

（3）     封裝請求獲取網易雲音樂的banner圖

安裝axios

封裝一下src下面的資料夾api下的index.js

（4）     新建一個元件IconList.vue，實現效果如下：

（5）     實現發現好歌單頁面：

新建MusicList.vue，實現基本佈局，再做ajax請求

 每一屏可以放幾塊內容，間距多少

效果圖：

（6）     最終效果圖：

（7 過濾函式(嘗試把播放量陣列改成億或者萬，呼叫方法直接在變數中引用方法)

效果圖：

4.Setup中獲取路由資訊

通過路由獲取ID值

5.歌單詳情內容views資料夾下的ListView.vue裡面包括了components資料夾下ListViewTop.vue和PlayList.vue兩個元件

（1）從資料中獲取，設定路由資訊，在router資料夾下的index.js裡建立路由資訊物件陣列，在musicList.vue中設定路由導航router-link點選跳轉到listView.vue介面

（2）首先我們從後端找到提供的文件的介面，然後再API資料夾下的index.js裡面引入，

然後回到listView.vue檔案裡引入index.js

（3）用setup（）使用生命週期函式，

在v-m繫結成功之後獲取歌單id，之後獲取到所點選的歌單id所對應的資料，之後將data歌單資料傳給playlist

（1）     寫完ListViewTop的基本樣式之後效果圖為：

（2）     圖片右上角也是運用到過濾函式變成以萬為單位的

（3）     下面也是運用到了阿里巴巴向量圖示庫裡面的內容

（4）播放內容：利用接收父元件傳遞的資料，獲取歌曲的數量

收藏裡也是呼叫了changeValue的函式，轉換為以萬為單位的數目。

效果圖：

（5）PlayList.vue介面的寫法跟listViewTop.vue一樣，寫出基本樣式然後通過v-for迴圈將歌單資料渲染到頁面上

效果圖：

...............