Cloud Music Move
网易云音乐 vue3+vite+em plus
Overview:
This article discusses a simple project based on the design of Netease Cloud Music. The project, built independently after completing a Vue learning course, uses Vue3 for the frontend, ElementPlus for UI components, and Vuex for state management. The backend relies on APIs provided by a well-known developer named Binaryify. The author seeks feedback to improve the project further.
Features:
- Home Page:
- Basic search functionality.
- Daily recommended playlists.
- Popular tracks.
- Pull-down to refresh data.
- My Page:
- Initial login requirement.
- Access to personal information after successful login.
- Ability to view and modify personal details.
- Cloud Page:
- Manages songs stored on the cloud.
- Song Details Page:
- Allows cover/lyric toggling.
- Supports downloading and viewing comments.
- Community Functionality:
- Watch videos while listening to music.
Summary:
The project is a Vue-based implementation mimicking the Netease Cloud Music interface. It features functionalities such as searching, personal profile management, cloud storage song management, detailed song information viewing, and a community section to watch videos while listening to music. The project leverages Vue3, ElementPlus for UI components, and Vuex for state management.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- LESS
Less CSS is a dynamic stylesheet language that extends the capabilities of CSS, allowing developers to write cleaner, more modular, and reusable stylesheets with features like variables, mixins, and nested rules.
- Pinia
Pinia is the official state management library for Vue.js. It provides a simple and intuitive API with full TypeScript support, devtools integration, and modular design. Pinia replaces Vuex as the recommended state management solution for Vue 3.