音乐播放器--vue项目总结

1.初始化vue，vue-cli，webpack:

$ vue init webpack vue-music

? Project name (vue-music)
? Project description (A Vue.js project) 音乐播放器
? Author (Spock <[email protected]>)
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests No
? Setup e2e tests with Nightwatch? No

然后执行npm install

接着安装两个插件：

$ npm i stylus stylus-loader

2. 修改基础设置

.eslintrc.js: 添加两条eslint规则

rules: {
    'eol-last': 0,//文件末尾强制换行(就是代码结尾处,要来个空格,相当于加一行,设置为0就可以了
    'space-before-function-paren': 0//函数定义时括号前面要不要有空格
}

安装三个插件

$ npm i babel-runtime fastclick babel-polyfill

    "babel-polyfill": "^6.26.0",//es6的API转义
    "babel-runtime": "^6.26.0",//对es6的语法进行转义
    "fastclick": "^1.0.6",//解决移动端300ms延迟的问题

main.js中的设置：

fastclick.attach(document.body)//这样就能解决body下按钮点击300ms的延迟

3. jsonp：动态创建script，解决跨域问题

安装插件：

npm i jsonp

文件 js/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)
      }
    })
  })
}

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

文件api/commend下数据:

import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'

export function getRecommend() {
  const url = 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg'

  const data = Object.assign({}, commonParams, {
    platform: 'h5',
    uin: 0,
    needNewCode: 1
  })

  return jsonp(url, data, options)
}

之后在recommend.vue中引用

安装插件，实现图片懒加载:

$ npm i vue-lazyload

音乐播放器--vue项目总结

猜你喜欢