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

前言

前端時間學了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://www.qiufengh.com/#/

須要改進的有不少，請你們能夠多提提意見。後續我會不斷改進，若是以爲還能夠，請star，大家的star是我前進的動力。