vue-music项目学习心路历程

前期准备工作

1. 安装node以及vue2环境
2. 使用vue-cli脚手架搭建项目（vue init webpack vue-music）
3. 安装stylus以及stylus-loader (vue install stylus 以及 vue install stylus-loader)
4. 安装babel-runtime （Babel为了解决这个问题，提供了单独的包babel-runtime用以提供编译模块的工具函数， 启用插件babel-plugin-transform-runtime后，Babel就会使用babel-runtime下的工具函数）
5. 安装babel-polyfill（babel-polyfill解决了Babel不转换新API的问题，但是直接在代码中插入帮助函数，会导致污染了全局环境，并且不同的代码文件中包含重复的代码，导致编译后的代码体积变大。）
6. 安装fastclick (移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件，这是为了检查用户是否在做双击。为了能够立即响应用户的点击事件，才有了FastClick。)

       

开发中遇到问题

1.style标签中引入外部css必须要加～ （比如：@import '~@/common/stylus/variable.styl' ）

2.封装jsonp方法

import originJsonp from 'jsonp'  //引入原jsonp

export default function jsonp(url, data, option) {
  url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)  //判断是否有'？'确定添加'？'or'&'

  return new Promise((resolve, reject) => {  //返回Promise对象
    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) : ''  //第一个'&'不需要，去除
}