自制UI框架

代码
使用文档

搭建

vue + parcel （后期改用vue-cli）
测试采用 karma + mocha
持续集成 Travis CI

好用的工具

vue.js devtools 适用于chrome浏览器和Firefox浏览器的插件
安装后，可在浏览器控制台查看vue组件

易踩坑的点

1.浏览器兼容性

:root{
   --height:32px
}
div{
   height:var(--height)
}
// :root的兼容性较低，用scss变量的方式更优
$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会自动转为驼峰

5.插件：
假如，在toast组件中

import Vue from 'vue'
Vue.prototype.$toast=function(){}

那么用户引入这个组件时，可能存在两个问题：
(1).import Vue from 'vue'
我无法确定，用户使用的是vue2或是vue3等
(2).Vue.prototype.$toast
我无法确定，用户本身是否已经使用过属性名$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用微任务microtask 作为异步延迟包装器，优先度特别高，比冒泡还快。
故有些时候会出现奇怪的bug
（vue2.5版本改用 macrotask 结合 microtask，但2.4和2.6是microtask ）

7.假如props里数据类型是Object
default不能直接默认一个对象，而应该用一个函数return一个对象
原因：每个组件中，export defalut{}，这个{}对象是构造组件的选项。
若props的数据default直接是一个对象，
假如页面中有两个相同组件（都用了这个对象），当其中一个改变closeButton的值，那么另一个也会受影响
（浅拷贝，引用同一个对象地址）
非object类型是深拷贝，不会互相影响