sioxas / vue-music

Vue 音乐搜索、播放 Demo

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

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

实现的功能

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

未实现的功能

• 我喜欢
• 下载

Build Setup

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

# 开发预览
npm run dev

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

截图

推荐

排行榜

搜索

播放页面

专辑页面

歌手页面

播放列表

vue-music's Issues

npm i失败是为什么呢

播放问题

现在的vue版本，音乐在苹果手机无法播放

项目启动报错

C:\Users\work\Desktop\vue-music-master>cnpm install
| [21/38] Installing align-text@^0.1.1platform unsupported [email protected] › [email protected] › [email protected] › [email protected] › fsevents@^1.0.0 Package require os(darwin) not compa
[fsevents@^1.0.0] optional install error: Package require os(darwin) not compatible with your platform(win32)
√ Installed 38 packages
√ Linked 536 latest versions
√ Run 0 scripts
deprecate babel-preset-es2015@^6.0.0 ???? Thanks for using Babel: we recommend using babel-preset-env now: please read babeljs.io/env to update!
Recently updated (since 2018-05-17): 10 packages (detail see file C:\Users\work\Desktop\vue-music-master\node_modules.recently_updates.txt)
√ All packages installed (625 packages installed from npm registry, used 24s, speed 303.19kB/s, json 574(4.87MB), tarball 2.14MB)

C:\Users\work\Desktop\vue-music-master>cnpm run dev

[email protected] dev C:\Users\work\Desktop\vue-music-master
node build/dev-server.js

Listening at http://localhost:8989

webpack: wait until bundle finished: /index.html
webpack built de374a06f610f7b5f754 in 6296ms
Hash: de374a06f610f7b5f754
Version: webpack 1.15.0
Time: 6296ms
Asset Size Chunks Chunk Names
static/img/icon-search.8825b03.png 17.3 kB
static/img/Vue_Music_Blur.f29e504.png 217 kB
static/img/icon-like.416a0c1.png 19 kB
static/img/icon-list.9da9a38.png 17 kB
static/img/icon-music.c00c468.png 16.5 kB
app.js 5.54 MB 0 app

ERROR in .//_vue-loader@9.9.5@vue-loader/lib/template-compiler.js?id=data-v-3135c848!.//_vue-loader@9.9.5@vue-loader/lib/selector.js?type=template&index=0!./src/components/Album.vue

歌单API失效

歌单都一直加载 而且报错

可恶啊，qq的歌词做了referer防盗链

不想在后端做接口啊

项目放在服务器 苹果设备查看无声音（安卓没试过，Windows pc可以）

项目放在服务器 苹果设备查看无声音（安卓没试过，Windows pc可以）

为什么下载的vue文件，本地运行总是报错

页面滑动样式

滑动到底部出现样式bug

榜单功能失效了

歌词不同步

有些歌曲的歌词总晚几秒

音乐播放失效了

这是不是一个完整的项目呀

为什么没有npm start呢

无法播放音乐

生成了dist, 本地可以播放音乐, 用手机浏览器却无法播放, 是什么个情况?

轮播图空白问题 , 处理

轮播的空白问题,是因为没有引入vue-awesome-swiper组件引起的, 加上代码就好了;
在 main.js 中 加入以下代码即可:
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)

首页图片调不出来，轮播是空图

提个bug

播放列表中点击右边的菜单按钮以后，点一下删除，然后下面的取消和背景点击以后消失不掉了

刚开始 学

你的 这个 没有用webpack吗？ 想看一下 你的脚手架 拿来用呢

new QMplayer()

这个QMplayer怎么来的

不好意思，打扰一下，请问vue项目的源代码在哪个文件夹里？

为什么打开dist文件夹里的index.html会报错

Uncaught TypeError: t.util.isObject is not a function

safari下，样式有点小问题

safari下，样式有点小问题

请问这个项目怎么学习呢？

表示初学者；不太明白script和link各是怎么引用的；
main.js都有什么内容；
app.vue；也没有找到浏览器中的相关app.js； import Search from './components/Search'是什么意思？
是否有一个合适的东西(注释类似)的东西适合学习的？

用了npm run dev 报错啦 不知道咋回事

用了npm run dev 报错啦 不知道咋回事

写的真不错

写的真不错

接口失效了

http://120.27.93.97/weappserver/get_music_info.php 这个接口失效了

如何 不使用Webpack ，直接使用vue文件？

页面问题

点击搜索的时候响应起键盘,然后搜索那块页面变窄了

排行榜

处于排行榜时一直往上滑，会出现问题

['cancel'](){}

'cancel{

}
这个是什么语法啊？有点看不懂