1.初始化vue,vue-cli,webpack:
$ vue init webpack vue-music
? Project name (vue-music)
? Project description (A Vue.js project) 音乐播放器
? Author (Spock <372842848@qq.com>)
? 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