用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是我前进的动力。