搭建
vue + parcel （后期改用vue-cli）
測試采用 karma + mocha
持續(xù)集成 Travis CI
好用的工具
vue.js devtools 適用于chrome瀏覽器和Firefox瀏覽器的插件
安裝后，可在瀏覽器控制臺查看vue組件
易踩坑的點
1.瀏覽器兼容性
:root{
--height:32px
}
div{
height:var(--height)
}
// :root的兼容性較低，用scss變量的方式更優(yōu)
$height:32px
div{height:$height}
array.includes(value)
// indexOf 兼容性更高
array.indexOf(value)>=0
2.父子組件的生命鉤子順序：
父created -> 子created -> 子mounted -> 父mounted
3.異步測試需要傳done，且時長不可超過2000ms
it('可以接受position',(done)=>{
...
setTimeout(()=>{
...
done()
},1500)
})
4.html標簽字母不可大寫，可用短橫桿，vue會自動轉(zhuǎn)為駝峰
5.插件：
假如，在toast組件中
import Vue from 'vue'
Vue.prototype.$toast=function(){}
那么用戶引入這個組件時，可能存在兩個問題：
(1).import Vue from 'vue'
我無法確定，用戶使用的是vue2或是vue3等
(2).Vue.prototype.$toast
我無法確定，用戶本身是否已經(jīng)使用過屬性名$toast，這個做法侵入性太強
即使用if判斷，也不一定萬無一失
故，更好的辦法是，將我的插件放在一個文件，如 plugin.js
用戶使用時，引入這個插件文件，并 Vue.use(plugin)，此時會把他本身的Vue傳入
Vue.prototype.$toast雖然可能重名，但用戶可以自己決定是否使用這個插件
export default {
install(Vue,options){
//這里的Vue，是通過用戶Vue.use()傳入的Vue
Vue.prototype.$toast=function () {
}
}
}
6.獲取頁面元素屬性失敗，可能是因為渲染尚未完成
用$nextTick()可解決大部分問題
但需要注意，$nextTick用微任務(wù)microtask 作為異步延遲包裝器，優(yōu)先度特別高，比冒泡還快。
故有些時候會出現(xiàn)奇怪的bug
（vue2.5版本改用 macrotask 結(jié)合 microtask，但2.4和2.6是microtask ）
7.假如props里數(shù)據(jù)類型是Object
default不能直接默認一個對象，而應(yīng)該用一個函數(shù)return一個對象
原因：每個組件中，export defalut{}，這個{}對象是構(gòu)造組件的選項。
若props的數(shù)據(jù)default直接是一個對象，
假如頁面中有兩個相同組件（都用了這個對象），當其中一個改變closeButton的值，那么另一個也會受影響
（淺拷貝，引用同一個對象地址）
非object類型是深拷貝，不會互相影響
