1、https://icomoon.io/ 图表字体生成网站
chrome插件 jsonview格式化json数据
eslint配置
rules{
'semi':['error','always'], //分号配置
'indent':0 // 缩进配置
}
/ eslint-disable no-new / new实例写法前加上，可以忽视eslint检查
重定向： {path: '*', redirect: '/goods'}
PC端开发，手机端调试，通过草料生成二维码https://cli.im/，手机访问。必须在同个局域网下。
1像素border
::after伪类，根据DPR缩放伪类
.border-1px{
position: relative;
&:after {
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top: 1px solid rgba(7, 17, 27, 0.1);
content: '';
}
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
.border-1px:after {
-webkit-transform: scaleY(0.7);
ransform: scaleY(0.7);
}
}css消除空白技巧：1、两个span之间不换行，2、设置父元素的font-size:0；
// 内容水平居中
.box-container{
display: flex;
justify-cintent: center;
align-item: center
}
<link rel='stylesheet' type='test/css' href='' media='screen and (max-width: 320px)'>
JS修改Rem
<script>
let htmlWidth = document.documentElement.clentWidth || document.body.client;
let htmlDom = document.getElemnetByTagname('html')[0];
htmpDom.style.fontSize = htmlWidth / 10 +'px;
</script>
***less字符串拼接
.bg-img(@url) {
background-image: url( '@{url}@2x.png');
}
***注意mixin中的路径，是相对于mixin文件的路径
文字超出部分隐藏css代码：
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
背景模糊：filter:blur(10px);
CSS Sticky footers布局两中方案：
1、flex布局
body{min-height:100vh; display:flex; flex-direction:cloum;}
main{flex:1;}2、CSS解决
main{min-height:100vh; padding-bottom:50px;}
footer{height:50px; margin-top:50px}背景图片模糊CSS：filter: blur(10px);
背景模糊 IOS下： backdrop-filter: blur(10px)
垂直居中最好的方法： dispaly:table dispaly:table-cell vertical-align:middel
上下margin会重合
img元素 直接用属性甚至width height
vue this.$nextTick()
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
div:ref='targetName' this.$refs.targetName取得DOM元素
class="xx-xx-hook" hook仅仅表示将会被JS选择，没有和实际的样式
Vue.set(this.food, 'count', 1); 设置监听对象没有的属性，将会响应式更新
vue2.0组件间事件派发与接收 https://segmentfault.com/a/1190000008018314
通过new Vue对象，专门管理事件，可以非父子组件通信
1、 mian.js eventHub : new Vue()
组件a this.$root.$emit('eName',)
组件b this.$root.$on('eName', () => {});
2、 父子组件通信，使用自定义事件, 子组件通过this.$emit出发事件， 在父组件的子组件元素中，通过@自定义事件名 接受事件
子组件a @click='addCart' methods: {addCart(event){ this.$emit('add', event.target) } }
父组件b <a @add='addFood'></a> methods: { addFood(){ ... } }
3、 使用Vuexel.getBoundingClentRect(); 获得元素距离视口的坐标
vue 使用JS钩子函数实现过渡效果
beforeDrop(el) {
// 从后往前判断，新运动小球是PUSH
let count = this.balls.length;
while (count--) {
let ball = this.balls[count];
if (ball.show) {
// 获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
let rect = ball.el.getBoundingClientRect();
// 小球初始 left:32 bottom:22
let x = rect.left - 32;
let y = -(window.innerHeight - rect.top - 22);
el.style.display = '';
el.style.webkitTransform = `translate3d(0,${y}px,0)`;
el.style.transform = `translate3d(0,${y}px,0)`;
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = `translate3d(${x}px,0,0)`;
inner.style.transform = `translate3d(${x}px,0,0)`;
}
}
},
dropping(el, done) {
// 手动触发浏览器重绘
/* eslint-disable no-unused-vars */
let rf = el.offsetHeight; //触发重绘html
this.$nextTick(() => {
// 重置偏移位置，即左下角
el.style.webkitTransform = 'translate3d(0,0,0)';
el.style.transform = 'translate3d(0,0,0)';
let inner = el.getElementsByClassName('inner-hook')[0];
inner.style.webkitTransform = 'translate3d(0,0,0)';
inner.style.transform = 'translate3d(0,0,0)';
// 等待过渡效果执行完毕， 触发动画完成事件afterDrop, 缺失将无法实现小球消失
el.addEventListener('transitionend', done);
});
},
afterDrop(el) {
console.log('---');
let ball = this.drops.shift();
if (ball) {
ball.show = false;
el.style.display = 'none';
}
}CSS高度自适应图片技巧（图片加载时，在view中预留位置）
.img-wrapper{
position: raletive;
width:100;
hieght:0;
padding-top:100% //技巧，当没有设置高度时，padding值相对与宽度进行计算
}
img{
position: absolute;
top: 0;
left: 0;
width: 100%;
hieght: 100%;
}
<a href='javascript:;'></a> 阻止链接的默认行为，防止页面调转**** $http.get('./package.json',{}).then() 可以直接获得package.json的内容，即读取本地json的数据
vue-resourse使用技巧：
拦截器Vue.http.interscptors.push( function(request,next){....});
vue实例下面有个http方法,resourse插件做的封装
http:{
root: '全局地址'
}axios
失败的请求通过catch捕获
全局拦截器
axios.interscptors.request.use(function(config){
console.log('request init...')
return config;
})
axios.interscptors.response.use(function(response){
console.log('response init...')
return response;
})AMD、CMD、CommonJS和ES6差异
AMD、CMD、CommonJS 是模块化开发的标准和方案
1、AMD(异步模块定义)是RequireJS在推广过程中对模块化定义的规范化产出
依赖前置
2、CMD(同步模块定义)是SeaJS(淘宝团队)在推广过程中对模块化定义的规范化产出
即用即返回，
3、CommonJS规范--module exports node端推荐使用
4、ES6特性 export/import
vue组件中的data是一个函数，通过 return {...}。 目的：组件的数据不应该时贡献的，通过函数返回，可以保证每次引用组件时的data数据对象不是一个。
通过import 可以在组件的script标签内直接导入样式 。import '../style/myStyle.less'
webpack 代理设置：
conig/index.js 中，设置dev:{ proxyTable: { '/goods/*': { target: 'targetUrl:port' } } }
通过代理，可以解决跨域问题
webpack深入与实战
在页面中想使用自定义的插件： 定义一个 新的类，使用 let Toast = Vue.extend(ToastComponent)进行继承, ，