vue-music

Vue includes music recommendation, search, play, list, favorites

Welcome to experience: neveryu.github. IO /vue-music/, better effect on mobile phones, wechat scan experience:

Introduction to the

This project is based on the latest actual combat project of vue2.4.1. Vue-cli2.9.3 + vue2.4.1 + AXIos + Vue-Router3.0.1 + ES6 + vux3.0.1 + webpack + better-Scroll + A mobile music app with an online real interface.

Implemented functions

1, music list, playlists, singer, ranking list, recommend 2, on the music play, pause, a song, the next song, like 3, playlists, added to the playlist, history list 4, search, artist, album, 5 MV, single page view singer, album pages, 6 MV, searches 7, 8, search history list 10. Lyrics 11. Personal Center 12. Project introduction

The most popular development approach is to separate the front from the back and VUE is one of the most popular front-end frameworks.

Screenshot demo

Mobile demo

Scan the QR code on your phone for better results

Project code

Github.com/Neveryu/vue…

build

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run local server
npm run prod.server.js
Copy the code

Tip

# If NPM install does not respond for a long time or the installation fails, please try
npm install --registry=https://registry.npm.taobao.org
Copy the code

detailed

Vue has its own scaffold building tool vuE-CLI. Very easy to use, use WebPack to integrate various development convenience tools, such as:

  • Code hot update, modify the code after the web page no refresh changes, very convenient for front-end development
  • Postcss, regardless of compatibility issues, only writes CSS code for Chrome, and automatically generates CSS code that supports multiple browsers
  • ESlint, unified code style
  • Bable, ES2015 has been out for some time, but many browsers are not compatible with ES6. With bable, feel free to use ES6 syntax, it will automatically escape to ES5 syntax
  • Stylus, similar to Sass/SCSS, but can be written without{} 和 :It is very convenient to use
  • Better Scroll, very easy to use mobile terminal all kinds of scrolling scene needs plug-in (PC support)
  • Vuex, vuex is a state management mode developed specifically for vue.js applications
  • Vue-router, a routing tool developed specifically for vue.js applications

In addition, vue-CLI already uses Node to configure a set of local server and installation commands, etc., local running and packaging can be done with only one command, very convenient.

Why write this project

Vue-sell before, is a very good VUE project tutorial, after learning VUE, follow the VUE-Sell, should be able to master the basic operation of VUE very skilled. However, how to combine VUex and VUE-Router, as well as other technologies, to do a large-scale project, many students are still suffering from lack of experience and project examples, so we have this VUE-Music.

Vue Family barrel, Better Scroll, JSONP and other tools are used in VUE-Music, and online real music interface data are also used. Moreover, many perfect components are encapsulated in the project, which is of great help to the learning and improvement of personal technology. The project level has also reached the medium and large level. Very suitable for vUE advanced learning.

Access to the tutorial

I wrote this project from the beginning to the end, and solved all the problems encountered in the project. Due to some package or module upgrade, there will be some small problems, I have solved all the problems.

You can contact me in group to get this video tutorial. There are also a lot of technical partners in the group, we exchange and learn together!!

Write in the last

My home page: neveryu. Making. IO/index. HTML

QQ group: 685486827