Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Sioxas/vue-music
Vue 音乐搜索、播放 Demo
https://github.com/Sioxas/vue-music
Last synced: about 1 month ago
JSON representation
Vue 音乐搜索、播放 Demo
- Host: GitHub
- URL: https://github.com/Sioxas/vue-music
- Owner: Sioxas
- Created: 2016-10-09T09:46:25.000Z (about 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 (about 2 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)