Vuejs is similar to Netease cloud music for listening to songs and searching. vuejs Netease

Vuejs is similar to Netease cloud music for listening to songs and searching. vuejs Netease

Preface

I learned vue at the front end and started to read vue1.0. Later, I felt that the technology had to be used in practice and I started to get started with vue2.0. Then it took nearly a week to create a small Netease cloud music project. Initially, I felt that the project was relatively small and there was no need to use vuex, so I didn't use it. But later I found that data stream transmission was a little troublesome and vuex would be used in the future.

Technology Stack

Vue + vue-router (core framework)
Better-scroll (smoother sliding experience on mobile terminals)
Vue-lazyload (lazyload user images)
Nprogress (used to load transition)
Axios (request)

Function Analysis and Design

First, I first referred to the design and development of some existing apps, and then decided to create two modules, Song order and search, which were mainly based on the previous end, and the back-end code was not studied, thank you for writing the API here. If you do not have an API, it does not matter. This does not affect our development. You can write json data in the following format for simulation:

Vuejs

The routing structure is as follows:

Components

1. Karaoke part:

Data is mainly provided by APIs, and the source code contains specific addresses. You need to understand the audio tag. If you are not familiar with the tag, watch audio.

2. Search:

Bind @ keydown to bind events for Real-Time query.

Better-scroll

Usage:

1. Be sure to use an empty layer to carry

<Div ref = "helloWrapper"> <div> // your code </div>

2. Before using vue, you must introduce

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

Be sure to use better-scroll after Data Rendering is complete,

This. $ nextTick () =>{// call });

Last few

Github address: https://github.com/hua1995116/musiccloudWebapp/

Online Demo address: http://qiufengh.com: 8080/

The above is a small series of Vuejs imitation Netease cloud music for listening to songs and search functions, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!