# vue-music

**Repository Path**: spklee/vue-music

## Basic Information

- **Project Name**: vue-music
- **Description**: https://github.com/Sioxas/vue-music
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-17
- **Last Updated**: 2024-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<p align="center"><a href="http://sioxas.github.io/" target="_blank"><img width="300"src="https://github.com/Sioxas/GitImage/raw/master/Apple_Music_Blur.png"></a></p>
<p align="center">Vue 音乐搜索、播放 Demo，资源来自QQ音乐</p>
<p align="center">查看Demo:<a href="http://sioxas.github.io/">http://sioxas.github.io/</a>,在手机上效果更好，扫一扫体验</p>
<p align="center"><a href="http://sioxas.github.io/"><img src="http://ww2.sinaimg.cn/large/6ee3e8b3gw1f9xjboxz2tj205i05fjrm.jpg" alt="vue-music"></a></p>


### 实现的功能
1. 音乐播放、暂停、上一曲、下一曲
2. 播放列表、添加到播放列表、做为下一首播放
3. 搜索单曲、歌手、专辑、MV
4. 查看歌手页面、专辑页面、MV
5. 热门搜索
6. 搜索历史记录
7. 排行榜
8. 切换播放模式
9. 歌词

### 未实现的功能
*   我喜欢
*   下载

## Build Setup

``` bash
# 下载或克隆下来，然后安装依赖
npm install

# 开发预览
npm run dev

# 打包发布，生成的文件在dist文件夹中
npm run build
```

# 截图


### 推荐
![推荐](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_2249.PNG)
### 排行榜
![排行榜](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1807.PNG)
![榜单](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1800.PNG)
### 搜索
![热门搜索和历史记录](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1808.PNG)
![搜索结果](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1351.PNG)
![搜索结果](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1591.PNG)
### 播放页面
![播放页面](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1352.PNG)
### 专辑页面
![专辑页面](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1587.PNG)
### 歌手页面
![歌手页面](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1588.PNG)
![歌手页面](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1589.PNG)
### 播放列表
![播放列表](https://github.com/Sioxas/GitImage/raw/master/screenshot/IMG_1590.PNG)