用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是我前進的動力。