$ git clone [email protected]:shushu2013/vue-music.git
$ cd vue-music
$ npm install
// 开发环境下运行代码
$ npm run dev
// 生成生产环境代码
$ npm run build
// 运行本地生产环境代码（必须先生成生产环境代码）
$ node prod.server.js-
相关插件fastclick GitHub 地址 -- 解决移动端 click 延迟
jsonp GitHub 地址 -- 使用 jsonp 获取数据
better-scroll GitHub 地址 -- 滚动插件
vue-lazyload GitHub 地址 -- 图片懒加载
create-keyframe-animation GitHub 地址 -- 创建帧动画
js-base64 GitHub 地址 -- base64 编码解码
lyric-parser GitHub 地址 -- 歌词解析
storage GitHub 地址 -- 本地存储
vue-fullscreen GitHub 地址 -- 全屏组件
windows 下使用 `git Bash` 运行 `vue-cli init` 的时候时候，按上下键不能选择 `Runtime + compiler` 或者 `Runtime-only`
解决：使用 windows 自带的 cmd 可以，git Bash 不行
解决：安装 editorconfig 插件，项目目录下配置 .editorconfig 文件
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
使用 webpack-dev-server 来做后台代理，去请求 QQ 音乐 歌单接口并设置相应的头文件信息（如 referer、host 等）
webpack-dev-server 内部使用的是 express 和 http-proxy-middleware 来代理跨域请求，相关参考资料：
http-proxy-middleware GitHub 地址
在 config 目录下的 index.js 文件中，配置 proxyTable 选项：
module.exports = {
dev: {
proxyTable: {
'/api/getDiscLists': {
target: 'https://c.y.qq.com/splcloud/fcgi-bin/p.fcg',
pathRewrite: {"/api/getDiscLists" : ""},
headers:{
referer: 'https://m.y.qq.com/',
host: 'c.y.qq.com'
}
changeOrigin: true
}
}
}
}
// 如果要代理多个请求，可设置为数组形式
module.exports = {
dev: {
proxyTable: [
{
context: '/api/getDiscLists',
target: 'https://c.y.qq.com/splcloud/fcgi-bin/p.fcg',
pathRewrite: {"/api/getDiscLists" : ""},
headers:{
referer: 'https://m.y.qq.com/',
host: 'c.y.qq.com'
}
changeOrigin: true
}
]
}
}
参考资料：
解决：配置 webpack-dev-server 的 host 和 disableHostCheck 选项
host: '0.0.0.0',
disableHostCheck: true
参考资料:
解决：列表项的 key 设置为 item.id 导致部分列表重用，不能跳转至正确位置，改为 key = index
Vue.js 2.5+ 的版本改变了 nextTick 的实现
Vue.js 优先检测是否支持原生 setImmediate，这是一个高版本 IE 和 Edge 才支持的特性，
不支持的话再去检测是否支持原生的 MessageChannel，如果也不支持的话就会降级为 setTimeout 0。
我们知道，除了高版本 IE 和 Edge，setImmediate 是没有原生支持的，
除非一些工具对它进行了重新改写。而 MessageChannel 的浏览器支持程度还是非常高的。
this.$refs.audio.play() 的逻辑也是可以执行到的，但是歌曲并不能播放，应该是浏览器对 audio
播放在使用 MessageChannel 做异步的一种限制。
因为是 MessageChannel 的锅，所以我就在 Vue.js 的初始化前，引入了一段 hack.js
// hack for global nextTick
function noop() {
}
window.MessageChannel = noop
window.setImmediate = noop
在 main.js 中引入 hack.js
import 'babel-polyfill'
import 'common/js/hack'
import Vue from 'vue'
import App from './App'
...
这样的话 Vue.js 在初始化 nextTick 的时候，发现全局的 setImmediate 和 MessageChannel 被改写了，就自动降级为 setTimeout 0 的实现，这样就可以规避掉我们的问题了。
参考资料：
需要添加新的字体图标，如放大和缩小图片时，使用百度字体在线编辑器把图标添加到字体文件。
图标资源：