使用css module
在vue-cli項目中，將文件命名為xx.module.yy; xx為文件名，yy為后綴名；可以是css，less；
這樣，在js文件中就能直接
//message.module.less
@import url('./var.less');
.message{ .center(); background: red; color: white; }
//vue-cli中的js文件；
import style from './styles/message.module.less' var div = document.createElement('div'); div.className = style.message; div.innerHTML = '1111'; document.body.appendChild(div);
以下是style對象：
這是css模塊化的內容：為了讓class不與其他模塊中的類名重樣，經過css-loader，將路徑和類名結合，新形成了唯一的一個class，替換成原來的class；
這塊我一直不明白，直接在style標簽中直接引入不久可以了，為什么用這種寫法？
引入單個vue組件，得到了一個vue組件對象，這個vue組件經過編譯，將<template>標簽內容編譯成了render函數，並且加入了很多vue組件對象自帶的屬性
獲得組件生成的dom的根節點
import Icon from './components/Icon' function getComponentRootDom(comp, props){ const vm = new Vue({ render:(h)=> h(comp,{props}) //props可以是事件，可以是屬性 }); vm.$mount();//掛載生成dom return vm.$el; } console.log(getComponentRootDom(Icon, {type:'home'})); //<Icon type='home'/>
向組件注入成員
添加到Vue.prototype上。
為了防止和組件屬性混淆，通常在原型上的屬性名以$開頭；
Vue.prototype.$hello = function(){ console.log('hello'); }
$ref
當前組件中有個特殊的屬性$refs;一旦在原生標簽或者組件標簽上添加ref屬性，就會在$refs值中添加屬性。
點擊btn后：
從結果上可以看出，ref加在compnents上，則是Component實例，加在原生標簽上，就是原生標簽，即：ref就是當前的標簽代表、
通過$refs可以獲取子組件實例的數據，也可以更改子組件實例的數據。
注意：$refs與vue的設計理念相違背：
- 當加在原生標簽時，表示直接去操作dom對象。與vue數據驅動理念違背；
- 當加在子component的標簽上，表示父組件對子組件的數據直接修改，這與數據量原則違背，誰的數據誰管理。
vue全局彈框
當然，vue可以實現一個v-show的彈出框，甚至可以寫個彈窗組件，用slot來在父組件中插入彈窗內容，甚至還可以用extend擴展來做。目前用原生js來做，因為點擊彈出，並不對渲染有多大的要求，可以實現
這種彈窗組件的缺陷是，在每個需要用到彈窗的組件中，都需呀引入組件，注冊組件，寫進<template></template>;用v-show來控制，使用比較麻煩。
思路：在全局注冊$alert方法，參數是彈框的配置（內容，顏色，相對定位元素，回調函數）