https://github.com/Sioxas/vue-music

Vue 音乐搜索、播放 Demo
https://github.com/Sioxas/vue-music

Last synced: 2 months ago
JSON representation

Vue 音乐搜索、播放 Demo

• Host: GitHub
• URL: https://github.com/Sioxas/vue-music
• Owner: Sioxas
• Created: 2016-10-09T09:46:25.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2022-09-06T17:55:21.000Z (over 2 years ago)
• Last Synced: 2024-10-15T13:21:22.902Z (3 months ago)
• Language: Vue
• Size: 12.1 MB
• Stars: 1,607
• Watchers: 87
• Forks: 517
• Open Issues: 9
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vue - vue-music - music?style=social) - Vue 音乐搜索播放 (Demo示例)
• awesome-github-star - vue-music
• awesome-vue - vue-music - Vue 音乐搜索播放 (Demo示例)
• awesome-github-vue - vue-music - Vue 音乐搜索播放 (Demo示例)
• awesome-github-vue - vue-music - Vue 音乐搜索播放 (Demo示例)
• awesome - vue-music - Vue 音乐搜索播放 (Demo示例)

README

        


Vue 音乐搜索、播放 Demo，资源来自QQ音乐

查看Demo:http://sioxas.github.io/,在手机上效果更好，扫一扫体验



### 实现的功能

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)