# Mobile云音乐

**Repository Path**: hamawang/cloud_music

## Basic Information

- **Project Name**: Mobile云音乐
- **Description**: 基于Vue3+Vite实现的集音乐推荐和音乐交友的在线音乐移动端网站，类似于网易云
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 3
- **Created**: 2026-01-19
- **Last Updated**: 2026-01-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# cloud_music 音乐推荐交友 移动端 网站

当前位置：
- [x] 前台用户界面：[Mobile云音乐](https://gitee.com/kang-zhenbin/cloud_music)
- [ ] 后台管理员界面：[云音乐_Admin](https://gitee.com/kang-zhenbin/cloud-music-backend-management)


本项目的灵感来自2024年初新改版的网易云音乐

抽离了大量的小组件可供复用

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
```

# 项目预览
## login 登录注册

<center class="half">
<img src="./md_images/login.png" width=200/>
<img src="./md_images/register.png" width=200/>
</center>

## home首页

<center class="half">
<img src="./md_images/首页1.png" width=200/>
<img src="./md_images/首页2.png" width=200/>
</center>

## 搜索页

<center class="half">
<img src="./md_images/搜索页1.png" width=200/>
<img src="./md_images/搜索页2.png" width=200/>
<img src="./md_images/搜索页3.png" width=200/>
</center>

## 歌手详情
<center class="half">
<img src="./md_images/歌手详情1.png" width=150/>
<img src="./md_images/歌手详情2.png" width=150/>
<img src="./md_images/歌手详情3.png" width=150/>
<img src="./md_images/歌手详情4.png" width=150/>
</center>

## 歌单详情

<center class="half">
<img src="./md_images/歌单详情.png" width=200/>
</center>

## 音乐详情

<center class="half">
<img src="./md_images/歌曲详情1.png" width=150/>
<img src="./md_images/歌曲详情2.png" width=150/>
<img src="./md_images/歌曲详情3.png" width=150/>
<img src="./md_images/歌曲详情4.png" width=150/>
</center>

## explore 发现
### 综合精选

<center class="half">
<img src="./md_images/综合精选1.png" width=200/>
<img src="./md_images/综合精选2.png" width=200/>
</center>

### 排行榜

<center class="half">
<img src="./md_images/排行榜1.png" width=200/>
<img src="./md_images/排行榜2.png" width=200/>
</center>

### 歌单广场

<center class="half">
<img src="./md_images/歌单广场1.png" width=200/>
<img src="./md_images/歌单广场2.png" width=200/>
</center>

### 歌手分类

<center class="half">
<img src="./md_images/歌手分类1.png" width=200/>
<img src="./md_images/歌手分类2.png" width=200/>
</center>

## roam 漫游

<center class="half">
<img src="./md_images/漫游1.png" width=200/>
<img src="./md_images/漫游2.png" width=200/>
</center>

## moment 社区动态

<center class="half">
<img src="./md_images/社区1.png" width=150/>
<img src="./md_images/社区2.png" width=150/>
<img src="./md_images/社区3.png" width=150/>
<img src="./md_images/社区4.png" width=150/>
</center>

## 访客视角

<center class="half">
<img src="./md_images/访客1.png" width=200/>
<img src="./md_images/访客2.png" width=200/>
</center>

## mine 个人中心

<center class="half">
<img src="./md_images/个人主页1.png" width=200/>
<img src="./md_images/个人主页2.png" width=200/>
<img src="./md_images/个人主页3.png" width=200/>
</center>

## 聊天交友

<center class="half">
<img src="./md_images/聊天交友.png" width=620/>
</center>