音乐播放器—笔记和坑

目录结构

src

Api：后端请求相关代码，包括ajax和jsonp

common：通用的静态资源。

——fonts

——image

——js

——stylus

components：通用组件

router：路由

store：存放vuex相关代码

安装stylus和stylus-loader

在package.json的dependencies 里面加上下面这两句：

"stylus": "^0.54.5",
"stylus-loader": "^2.1.1"

然后：npm install

关于stylus的更多：npmjs.com

从qq音乐抓取数据

jsonp原理，手写jsonp

在package.json的dependencies 里面加上下面这句：

"jsonp":"^0.2.1"

然后：npm install

封装jsonp：

import originJsonp from 'jsonp'

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

  return new Promise((resolve, reject) => {
    originJsonp(url, option, (err, data) => {
      if (!err) {
        resolve(data)
      } else {
        reject(err)
      }
    })
  })
}

export function param(data) {
  let url = ''
  for (var k in data) {
    let value = data[k] !== undefined ? data[k] : ''
    url += '&' + k + '=' + encodeURIComponent(value)
  }
  return url ? url.substring(1) : ''
}

轮播图

使用better-scroll

优化：用到<keep-alive>，解决切换tab回来时重新渲染的问题

抓取歌单列表

最新的vue-webpack-template 中去掉了dev-server.js，所以要在webpack.dev.conf.js中写。参考