preface

As I continue to learn about Vue, I need to do a small project to learn more by implementing the project. With people’s demand for music, the use of mobile terminals is increasing. The project is written and realized through Vue, fully borrowing the UI design and function realization of netease cloud music mobile terminals, and striving to achieve the effect of imitating the real. A few days ago began to do, up to today is barely usable.

This project is conceived by the individual independent programming research.

Note: this project is purely personal, please choose normal useNetease Cloud Music officialThe client.

Project objectives

Fully realize the functions of netease Cloud music on mobile terminals

The project is still being developed

Last update (2019-12-4) : Fixed a Bug where the login page could not return

Last update: Axios request timeout setting

Version update

  • Version: 2.4.8-> 2.8.10
  • Date: December 7, 2019
  • Update:
    • Added discovery page drop-down refresh + light prompt
    • Added anchor list to radio ranking page
    • Added 24 hour program chart to radio ranking page
    • Added radio rankings page radio rankings in the paid boutique list
    • Fix the login page cannot return Bug
    • Fix other known problems
    • To optimize the structure of

Viewing historical Versions

If you have any questions or suggestions, welcome to Issue!

This project is in constant improvement, please wait and see ~

Technology stack

Mainly depends on

  • Vue family bucket (using VUE-CLI as a build tool)
  • WebPack4.0
  • ES6
  • Less
  • ESLint
  • Vant UI
  • Netease Cloud Music API

Results demonstrate

Click to view the effect [Use Chrome for better effect]

The target function

  • Mobile login, registration
  • Change the password
  • My page playlist information
  • Add and delete playlists
  • Recent play
  • Cardiac model
  • My radio
  • My collection
  • Discover page recommended song list
  • Found page new disk
  • Discover new songs on page
  • Discover page recommended daily
  • Discover page playlist
  • Song single square
  • A new song to recommend
  • More new album
  • Discover page leaderboards
  • Discover page station
  • Video page
  • A friend page
  • Log out
  • Discover page private FM
  • The search function
  • Search results display
  • Hot search list
  • The historical record
  • The search is recommended
  • Singer classification
  • Playback function (Small player progress bar)
  • The playlist
  • Add and delete playlists
  • Sign in
  • Like the song or not
  • Album collection or not
  • Song single comment
  • Album reviews
  • Like, send, delete comments
  • Radio program review
  • Video review
  • The user related
  • Page scrolling
  • Swiping left and right
  • Page switching animation
  • Landing judgment
  • Overall optimization & fixes

Part of the screenshot

Side account center

The launch step

View source code Click to view source code

  1. npm install
  2. NPM Run Dev (Local development)
  3. NPM Run Build (Production environment package)

Project layout

.src
+-- api
|   +-- config.js // Access the relevant API address
|   +-- index.js // Request the relevant API method
+-- assets
|   +-- styles
    |   +-- border.css // Mobile 1px border
    |   +-- global.less // Apply global styles
    |   +-- reset.css // Reset the style
    |   +-- resetEleUI.less // Modify the elementUI component style
|   +-- utils // The method to use globally
    |   +-- getPhone // Get the mobile phone number
    |   +-- modalScroll // Handle the mobile scrollbar
|   +-- Bus.js / / Bus Bus
|   +-- Mixins.js / / in (a mixin)
+-- base // Access the widgets common to the page
    +-- albumPage // Playlist display page component
    +-- songListPage // Display a list of songs
    +-- alert // Prompt message
    +-- audioAllTitle // Play all title lines
    +-- button // Login page button
    +-- djSublistCard // Long card component similar to my radio page
    +-- generalNav // The header line at the top of the generic page
    +-- icon // Icon display
    +-- idxCard // Official rankings
    +-- imgCard // The picture card of the playlist
    +-- interchangeable // Use it to display items other than singles on the search display page
    +-- loading / / loading in rings
    +-- pageErrorInfo // Error notification
    +-- pageErrorLoading // Page loading loading
    +-- searchInput / / search box
    +-- slider // Playlist slider
    +-- sliderNav // Slide the title
    +-- song / / songs
    +-- titleFooter // Search the display page to synthesize the general header and tail of the page items
+-- getInfos // Get some static information
    +-- getData // Get static information
    +-- icon // Access icon information
+-- pages // Project routing page
+-- router // Route configuration
    +-- index
+-- store // VuEX is configured and used
    +-- action // Root level action
    +-- getter // Root level getter
    +-- index // Where the modules are assembled and exported to store
    +-- mutation-types // mutation types at the root level
    +-- mutation // mutation at root level
    +-- state // Root-level state
Copy the code

View the source codeWelcome to star, welcome to issue

Later, I will update the pits, new knowledge and new methods encountered in the project development process in the blog. Welcome to attention

This project will be updated for a long time, welcome to point out the problem, learn together

Hope to read this article you have help, have inspiration, if there is not enough, welcome to criticize the exchange!

Welcome to my personal blog to share front-end techniques, interview questions, interview techniques and more

Hard to sort out for a long time, but also hope to manually praise encouragement ~