Vue Templates Logo Vue Templates
Vue3 Cloud Music screenshot

Vue3 Cloud Music

Author Avatar Theme by Path yu
Updated: 5 May 2025
337 Stars

基于Vue3+Vite+TypeScript+compositionApi+naiveui构建的精致的支持夜间模式网易云音乐流媒体网站webApp

Github Live Preview

Categories

Express Vite Less Scss Tailwind

Overview

cloud-music is a music streaming website project primarily built using Vue3, TypeScript, and Vite to resemble the desktop version of NetEase Cloud Music. As an exploration of cutting-edge frontend technology stacks, the project aims to be not only educational but also enjoyable for developers. It utilizes various technologies and libraries such as Vue3, naive-ui, Vite, axios, dayjs, and more to create a feature-rich music streaming platform.

Features

  • Vue3: Framework for rapid web user interface development.
  • naive-ui: Vue3-based component library with customizable themes and night mode support.
  • Vite: Next-generation frontend build tool supporting HRM, TypeScript, JSX out of the box.
  • axios: Promise-based HTTP library for browser and Node.js.
  • dayjs: Lightweight library for time-related formatting issues.
  • color.js: JavaScript library for immutable color conversion and operations.
  • eslint: JavaScript code style checking tool based on AST patterns.
  • lodash: Utility JavaScript function library for common tasks.

Installation

To run the project, it is recommended to use npm and Node.js version 14.18+ or 16+. Here is a general guide to install and run the project:

  1. Install pnpm:
npm install -g pnpm
  1. Clone the repository:
git clone [repository_url]
cd [project_folder]
  1. Install dependencies:
pnpm install
  1. Build and run the project:
pnpm run build
pnpm run serve
  1. Preview the project on the specified local server address.

Summary

Cloud-music is a Vue3-based music streaming website project that leverages a variety of modern tools and libraries to deliver features such as customizable themes, night mode, song playback controls, lyrics synchronization, user playlist management, lazy loading, and much more. By following the provided installation guide, developers can explore and learn from this project while also enjoying the music streaming experience it aims to provide.