用vuejs仿網易雲音樂（實現聽歌以及搜尋功能）

標籤：即時   通過   線上示範   代碼   port   lazyload   部分   網易雲音樂   線上   

前言

前端時間學了vue，一開始看了vue1.0，後來實在覺得技術總得實踐，就直接上手vue2.0。然後花了將近一周時間做了一個網易雲音樂的小項目。一開始覺得項目比較小，沒必要用vuex所以就沒有使用，但是後來探索資料流傳輸有點麻煩，後續會使用vuex。

技術棧

• vue+vue-router（核心架構）
• better-scroll（使移動端滑動體驗更加流暢）
• vue-lazyload（使用者圖片懶載入）
• nprogress（用於載入過渡）
•  axios（請求）

功能分析與設計

首先我先參考了現有的一些APP的設計與開發，然後決定做了歌單和搜尋兩個模組，本身主要以前端為主，後端代碼並沒有研究，這裡要感謝這位同學寫的API。如果你沒有API也沒有關係，這並不影響我們的開發，你可以寫如下形式的json資料進行類比：

vuejs

路由結構如下

以下是組件

1.歌單部分：

資料主要由API提供，源碼中有具體地址。需要瞭解audio標籤，不熟悉的同學看audio

2.搜尋部分：

通過綁定@keydown來綁定事件，實現即時查詢。

better-scroll

使用：

1.一定要用一個空層來承載

<div ref="helloWrapper"><div>//你的代碼</div></div>

2.在vue中使用前必須引入

import BScroll from ‘better-scroll‘;this.helloScroll = new BScroll(this.$refs.helloWrapper, {  click: true});

一定要在資料渲染完成後使用better-scroll，

this.$nextTick(() => {  //調用});

最後上幾張

 

 

 github項目地址：https://github.com/hua1995116/musiccloudWebapp/

線上示範地址：http://qiufengh.com:8080/

需要改進的有很多，請大家可以多提提意見。後續我會不斷改進，如果覺得還可以，請star，你們的star是我前進的動力。

　　

　　

用vuejs仿網易雲音樂（實現聽歌以及搜尋功能）