1.一个优雅的提示是网站必不可少的。
2.ESLint使用总结
（1）在.eslintrc.js里关闭某条规则， ‘规则名‘: ‘off‘或0
举例：
rules: {
‘generator-star-spacing‘: ‘off‘,‘no-restricted-syntax‘: ‘off‘,
‘indent‘: 0,
‘new-cap‘: 0
}
（2）// eslint-disable-next-line 对下一行禁用，举例代码：
// eslint-disable-next-line var curType = type ? type : opt.defaultType
（3）// eslint-disable-line 对这一行禁用，举例代码：
toastVM = new toastTpl() // eslint-disable-line
（4）eslint常见规则，请参考： ESLint常见命令（规则表）
3.white-space,word-spacing,letter-spacing,word-break这些都是什么鬼？
参见博客：word-spacing、word-break、letter-spacing和white-space
4.CSS动画库，Animate.css
官方地址：https://daneden.github.io/animate.css/
（1）安装： npm install animate.css --save 或 yarn add animate.css
（2）引入： vue项目，src/main.js 代码如下：
import animate from ‘animate.css‘
Vue.use(animate)
（3）使用：在需要动画的vue文件，比如detail.vue
示例代码：
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<div class="mask" v-show="cartModalShow"></div>
</transition>
注意：
- animated类名必须加
- 第二个类名参考官方文档里面的动画名，如bounceIn,fadeOut,slideOutUp……
- <transition>里面的元素必须是单独的，没有兄弟元素的。并且是有v-show,v-if,等显示和隐藏相关的指令的。。
5.$emit()
需求情景描述：我在详情页（父组件）点‘加入购物车’按钮，显示购物车信息模态框（子组件），在模态框里点‘继续购物’关闭该模态框，模态框的显示和隐藏是父组件的一个参数cartModalShow控制的。
也就是说，点击事件发生在子组件，需要控制父组件里的某个参数。怎么办吧？
代码示例：
这是子组件：
<template>
<div class="cart-modal">
<div class="msg">加入购物车成功！</div>
<div class="btns">
<a href="javascript:;" class="b-r" @click="toCart">进入购物车</a>
<a href="javascript:;" @click="closeModal">继续购物</a>
</div>
</div>
</template>
子组件js部分：
methods: {
toCart () {
this.$router.push({
path: ‘cart‘
})
},
closeModal () {
this.$emit(‘close‘)
}
}
this.$emit(‘close‘) 该方法向父组件传递了‘close‘事件
点‘继续购物’这个按钮时，需要关闭模态框。但是控制模态框显示的属性在父组件里。
父组件代码如下：
<transition enter-active-class="animated fadeIn" leave-active-class="animated fadeOut" :duration="200">
<cart-modal v-show="cartModalShow" @close="closeCartModal"></cart-modal>
</transition>
v-show="cartModalShow" 控制着该模态框的显示和隐藏
@close="closeCartModal" 父组件使用close事件来触发closeCartModal方法关闭模态框
js代码：
methods: { closeModal () {
this.cartModalShow = false
}}
这么写出来就发现其实用法也挺简单的，之前没有总结和整理，以为很难。
6.cubic-bezier是什么鬼？
参考文章：实用的 CSS — 贝塞尔曲线(cubic-bezier)
（1）animation-timing-function, transition-timing-function
（2）cubic-bezier 三次贝塞尔，为animation生成速度曲线的函数，cubic-bezier(<x1>, <y2>, <x2>, <y2>)
总结：2019年开始，每个工作日都会写一篇博客记录用到的或学到的技术，并没有那么难，写博客的目的纯粹是为自己做个记录，同时也是整理，当你需要把一件事情写出来时，你不得不十分清楚。以前也接触过不少的技术知识，基本上用过就丢一边了，下次再遇到时，又要重新找制作方法。
希望这是一个好的开始，坚持下去。我可能和某些人比差很远，但是每天都比自己更进步。
原文地址：https://www.cnblogs.com/basic0001/p/10245848.html