1、eslintrc.js中添加符合编辑器的规则，参照这里
2、在build/webpack.base.conf.js中找到resolve设置别名，方便在引用路径的时候使用
3、安装依赖：babel-runtime（转移es6语法），fastclick（消除移动端300ms点击延迟），babel-polyfill（可以用es6的api）
4、npm install jsonp再封装成promise形式，其中用到了URI编码函数decodeURIComponent
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) : ''
}
encodeURIComponent和encodeURI的区别
var uri="http://www.jxbh.cn/illegal value.htm#start";
alert(encodeURI (uri)):
//”http: //www.jxbh.cn/illegal%20value .htm#s tart”
alert( encodaURIComponent (uri));
//”http% 3A%2F%2Fwww.jxbh.cn%2 Fillegal%2 0value. htm%23 start”一个Promise的例子
var getDate = function (a, b) {
return new Promise(function (resolve, reject) {
var sum = a + b
if (true) {
resolve(sum)
} else {
reject(sum)
}
})
}
getDate(1, 1)
.then(function (data) {
console.log(data);
return getDate(3, 3)
})
.then(function (data) {
console.log(data);
return getDate(5, 5)
})
.then(function (data) {
console.log(data);
})5、将公用的配置写进配置文件，再以模块的形式导出来用
6、使用了Object.assign()合并操作，使用new Set和Array.form实现去重
Object.assign也可以实现复制
let obj = {name: '二月', age: {c: 12}}
let o2 = Object.assign({}, obj, {sex:'男'})
console.log(o2)
//{ name: '二月', age: { c: 12 }, sex: '男' }var arr = [1,2,2,3,4] // 需要去重的数组
var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成array
console.log(newArr) // [1,2,3,4]7、保证dom成功渲染，一般加个延时
mounted(){
this.$nextTick(function () {
//
})
setTimeout(function () {
//
},20)
}设置为20ms为经验值，一般浏览器的刷新频率是17ms
8、ref的使用
//html
<div ref="box" class="div1 div2">
//js
mounted(){
console.log(this.$refs.box.className);
},
//div1 div29、Slider组件开发
基于better-scroll开发一个slider组件
动态添加dom
export function hasClass(el, className) {
let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
return reg.test(el.className)
}
export function addClass(el, className) {
if (hasClass(el, className)) {
return
}
let newClass = el.className.split(' ')
newClass.push(className)
el.className = newClass.join(' ')
}
export function getData(el, name, val) {
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}
let elementStyle = document.createElement('div').style
let vendor = (() => {
let transformNames = {
webkit: 'webkitTransform',
Moz: 'MozTransform',
O: 'OTransform',
ms: 'msTransform',
standard: 'transform'
}
for (let key in transformNames) {
if (elementStyle[transformNames[key]] !== undefined) {
return key
}
}
return false
})()
export function prefixStyle(style) {
if (vendor === false) {
return false
}
if (vendor === 'standard') {
return style
}
return vendor + style.charAt(0).toUpperCase() + style.substr(1)
}
10、开发scroll组件
也是基于better-scroll开发的，用于滚动列表，后面用cube-ui库替换
11、使用vue-lazyload来进行图片懒加载
12、fastclick和better-scroll的click冲突，使用fastclick和class="needsclick"属性解决
13、封装获取数据函数的技巧（get,set）
如果只传两个参数就是get数值，如果传三个参数，就是set数值。
export function getData(el, name, val) {
const prefix = 'data-'
if (val) {
return el.setAttribute(prefix + name, val)
}
return el.getAttribute(prefix + name)
}14、position:relation使用
设置height:100%时是相对父元素的高度来计算的，并不脱离标准文档流
position:absolution脱离标准文档流
15、巧妙运用Math.min(a,b)
a是一个固定值假如设置为10，b是从0开始变大的变化值，意思是上限就是10，超过10就取10，没超过10就取b的值
16、在进度条中的一个技巧：不能小于0，不能大于进度条长度
const offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth, Math.max(0, this.touch.left + deltaX))
17、歌词插件lyric-parser
18、sessionStorage和localStorage库good-storage
回顾笔记
1、recommend.vue知识点
img标签可以使用@load来监听图片是否加在完。
布局采用的是百分比布局+flex，头部引用header组件，内容部分则采用position:fixed，top:60px，width如果不写则默认100%。
2、scroll组件中，利用better-scroll封装成基础组件，其中probeType设置为3会在滑动过程中监听scroll变化，是否设置为3看业务需求
3、@click.native当给自定义组件添加点击事件时，必须加上.native
4、vue中@touchstart.stop.prevent 中target属性，返回DOM树最顶层元素。也就是点击的哪个返回哪个