Morioh
Login
Liya Gebre

Liya Gebre

3 years ago

Rainbow Cat Blue Rabbit Series-Blue Rabbit Music

Welcome to my blue rabbit music

A mobile music WebApp is developed based on Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6, etc. The UI interface refers to the Android version of QQ music and flex layout adapts to common mobile terminals.

Partial image preview

 

 

Development purpose

By learning to develop a Vue project, let yourself be more proficient in using Vue, familiar with the idea of ​​modular development, better use of ES6 and other knowledge, and improve your technical capabilities

Functions implemented:

  1. Music play, pause, previous song, next song
  2. Playlist, add to playlist, play as next song
  3. Search singles, singers
  4. View artist details page
  5. Leaderboard
  6. Switch playback mode

EVERYTHING

  1. Lyrics cannot be displayed by sliding left and right, only records can be played
  2. Search: Clicking on the singer will not jump to the artist details page, and clicking on the song title will not display the record content
  3. My part to be developed

Technology stack

front end

  1. Vue: MVVM framework for building user interfaces
  2. vue-router: a routing system for single-page applications
  3. vuex: Vue centralized state management, very convenient when multiple components share certain states
  4. vue-lazyload: Implement lazy loading of images, save user traffic, and optimize page loading speed
  5. better-scroll: A plug-in that solves the needs of various scrolling scenarios on the mobile terminal, making the sliding experience on the mobile terminal smoother
  6. SCSS: CSS pre-compiled processor
  7. ES6: ECMAScript new generation grammar, modularization, deconstruction assignment, Promise, Class, etc.

rear end

  1. Node.js: A local test server built with Express
  2. vue-axios: used to request back-end API music data

Other tools

  1. vue-cli: Vue scaffolding tool, quickly initialize project code
  2. eslint: Code style checking tool to help us standardize code writing (must develop a good code standard)

Build Setup

A Vue.js project

# 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

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

Download Details:

Author: Rainbow-cat-blue-rabbit

GitHub: https://github.com/Rainbow-cat-blue-rabbit/blue-rabbit

#vuejs #javascript #vue-js #vue

Rainbow Cat Blue Rabbit Series-Blue Rabbit Music
2.70 GEEK