vue-loader 學習總結

vue-loader 是一個webpack 的loader，而且vue-loader的特性：

• ES2015 默認支持;
• 容許對 Vue 組件的組成部分使用其它 Webpack loaders，好比對 <style> 使用 SASS 和對 <template> 使用 Jade；
• .vue 文件中容許自定義節點，而後使用自定義的 loader 處理他們；
• 把 <style> 和 <template> 中的靜態資源看成模塊來對待，並使用 Webpack loaders 進行處理；
• 對每一個組件模擬出 CSS 做用域；
• 支持開發期組件的熱重載。

建立一個vue-loader項目的命令，使用vue-cli來建立vue-loader項目:

npm install -g vue-cli

vue init webpack-simple vue-test(項目名稱)

cd vue-test

npm install

npm run dev

vue-loader 

css注意

style 中能夠有屬性scoped 也能夠沒有 當加入scoped屬性時，style中的css 只做用於當前的組件元素中，可是對於屬性的樣式如：p{color: red} 在做用域中性能會比class .class{color: red} 的樣式要慢不少

在遞歸組件中當心使用後代選擇器! 對於帶有選擇器 .a .b 的CSS 規則，若是元素 .a 包含遞歸子組件，全部的子組件中的 .b 會被匹配。

一個組件中能夠有多個style標籤

css模塊，使用module 屬性，在組件的class中能夠使用$style這個計算屬性 如：<p :class=$style.blue></p> 也能夠使用對象／數組。如：< p :class="[$style.blue, $style.yellow]"></p>  < p :class="{ [$style.red]: isRed }"></p>  

 

熱重載，啓用熱重載後，當你修改 .vue 文件時，全部該組件的實例會被替換，而且不須要刷新頁面。