vue仿移动端音乐笔记

1、公共的路径配置：修改webpack.base.conf.js

'common': resolve('src/common'),
'components': resolve('src/components'),
'base': resolve('src/base'),
'api': resolve('src/api')

在alias对象下我们可以定义路径的变量，原理是调用了resolve()这个方法：

function resolve (dir) {
  return path.join(__dirname, '..', dir)
}

在resolve（）方法中，我们直接将路径传入方法中，返回一个拼接好的路径

例如：可以在main.js中引用import 'common/stylus/index.styl'

2、使用fastclick

使用fastclick.js  从点击屏幕上的元素到触发元素的 click 事件，移动浏览器会有大约 300 毫秒的等待时间

用法：在main.js中引入fastclick

import fastclick from 'fastclick'

fastclick.attach(document.body)

 3、tag

router-link默认渲染成a标签，也有方法让它渲染成其他标签，tag属性就用来设置router-link渲染成什么标签的。

<!-- 渲染成div标签 -->
<router-link to="goods" tag="div"></router-link>

 4、重定向redirect

应用在首次运行时右侧是一片空白，应用通常都会有一个首页，例如：Home页。
使用router.redirect方法将根路径重定向到/home路径：

export default new Router({
  routes: [
    {
      path: '/',
      redirect:'/recommend'
    },
    {
      path: '/recommend',
      component: Recommend
    },
    {
      path: '/singer',
      component: Singer
    }

  ]
})

 5、jsonp跨域请求（https://github.com/webmodules/jsonp ）

参数：

• url (String) url to fetch
• opts (Object), optional

　　param (String)    指定回调函数的查询字符串参数的名称 (defaults to callback)

　　timeout (Number) 超时错误发出多长时间 (defaults to 60000)

　　prefix (String)   对于请求的回调函数处理json响应前缀 (defaults to __jp)

　　name (String)      请求的回调函数处理json响应的名字 (defaults to prefix + incremented counter)

• fn callback

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) : ''
}

 6、keep-alive

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。主要用于保留组件状态或避免重新渲染。

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素