什么是Vue-loader?

官方文檔中具有專業(yè)的解釋，個人理解，用里面的一句話來總結就是，webpack 和 Vue Loader 的結合為你提供了一個現(xiàn)代、靈活且極其強大的前端工作流，來幫助撰寫 Vue.js 應用

一、處理資源路徑

當 Vue Loader 編譯單文件組件中的 <template> 塊時，它也會將所有遇到的資源 URL 轉換為 webpack 模塊請求。

例如：

<img src="../image.png">

將會被編譯為一個 模塊請求：

createElement('img', {
  attrs: {
    src: require('../image.png') // 現(xiàn)在這是一個模塊的請求了
  }
})

默認下列標簽/特性的組合會被轉換，且這些組合時可以使用 transformAssetUrls 選項進行配置的。

{
  video: ['src', 'poster'],
  source: 'src',
  img: 'src',
  image: ['xlink:href', 'href'],
  use: ['xlink:href', 'href']
}

此外，如果你配置了為 <style> 塊使用 css-loader，則你的 CSS 中的資源 URL 也會被同等處理

轉換規(guī)則 

• 資源 URL 轉換會遵循如下規(guī)則： 如果路徑是絕對路徑 (例如 /images/foo.png)，會原樣保留。
• 如果路徑以 . 開頭，將會被看作相對的模塊依賴，并按照你的本地文件系統(tǒng)上的目錄結構進行解析。
• 如果路徑以 ~ 開頭，其后的部分將會被看作模塊依賴。這意味著你可以用該特性來引用一個 Node 依賴中的資源
• 如果路徑以 @開頭，也會被看作模塊依賴。如果你的 webpack 配置中給 @ 配置了 alias，這就很有用了。所有 vue-cli創(chuàng)建的項目都默認配置了將 @ 指向 /src

因為像 .png 這樣的文件不是一個 JavaScript 模塊，你需要配置 webpack 使用 file-loader 或者 url-loader 去合理地處理它們。通過 Vue CLI 創(chuàng)建的項目已經(jīng)把這些預配置好了。

為什么要轉換資源URL（好處）

• file-loader 可以指定要復制和放置資源文件的位置，以及如何使用版本哈希命名以獲得更好的緩存。此外，這意味著 你可以就近管理圖片文件，可以使用相對路徑而不用擔心部署時 URL 的問題。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑為正確的 URL。
• url-loader 允許你有條件地將文件轉換為內聯(lián)的 base-64 URL (當文件小于給定的閾值)，這會減少小文件的 HTTP 請求數(shù)。如果文件大于該閾值，會自動的交給 file-loader 處理。

二、使用預處理器

在 webpack 中，所有的預處理器需要匹配對應的 loader。Vue Loader 允許你使用其它 webpack loader 處理 Vue 組件的某一部分。

它會根據(jù) lang 特性以及你 webpack 配置中的規(guī)則自動推斷出要使用的 loader。

例如為了通過sass，less等來編譯<style>,就配置相應的loader即可

三、Scoped CSS

當 <style> 標簽有 scoped 屬性時，它的 CSS 只作用于當前組件中的元素。

這類似于 Shadow DOM 中的樣式封裝

3.1 混用組件和全局樣式

可以在一個組件中同時使用有 scoped 和非 scoped 樣式：

<style>
/* 全局樣式 */
</style>

<style scoped>
/* 本地樣式 */
</style>

3.2 子組件根元素

使用 scoped 后，父組件的樣式將不會滲透到子組件中。不過一個子組件的根節(jié)點會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設計是為了讓父組件可以從布局的角度出發(fā)，調整其子組件根元素的樣式

通常為了避免組件之間樣式的相互影響，最好用的辦法就是在最外層添加一個不帶class屬性的div，這樣就不必去找根元素的類名然后避免重名這一麻煩的步驟了

3.3 深度作用選擇器

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：

<style scoped>
.a >>> .b { /* ... */ }
</style>

PS：有些像 Sass 之類的預處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作

注意：

• Scoped 樣式不能代替 class?？紤]到瀏覽器渲染各種 CSS 選擇器的方式，當 p { color: red } 是 scoped 時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example {
• color: red }，性能影響就會消除。
• 在遞歸組件中小心使用后代選擇器! 對選擇器 .a .b 中的 CSS 規(guī)則來說，如果匹配 .a 的元素包含一個遞歸子組件，則所有的子組件中的 .b 都將被這個規(guī)則匹配

四、熱重載

“熱重載”不只是當你修改文件的時候簡單重新加載頁面。啟用熱重載后，當你修改 .vue

文件時，該組件的所有實例將在不刷新頁面的情況下被替換。它甚至保持了應用程序和被替換組件的當前狀態(tài)！當你調整模版或者修改樣式時，這極大地提高了開發(fā)體驗。

4.1 狀態(tài)保留規(guī)則

• 當編輯一個組件的 <template> 時，這個組件實例將就地重新渲染，并保留當前所有的私有狀態(tài)。能夠做到這一點是因為模板被編譯成了新的無副作用的渲染函數(shù)
• 當編輯一個組件的 <script> 時，這個組件實例將就地銷毀并重新創(chuàng)建。(應用中其它組件的狀態(tài)將會被保留) 是因為 <script> 可能包含帶有副作用的生命周期鉤子，所以將重新渲染替換為重新加載是必須的，這樣做可以確保組件行為的一致性。這也意味著，如果你的組件帶有全局副作用，則整個頁面將會被重新加載
• <style> 會通過 vue-style-loader 自行熱重載，所以它不會影響應用的狀態(tài)。

用法之類的就不在這里這里了。

五、函數(shù)式組件

vue 提供了一種稱為函數(shù)式組件的組件類型，用來定義那些沒有響應數(shù)據(jù)，也不需要有任何生命周期的場景，它只接受一些props 來顯示組件。

要聲明一個應該編譯為函數(shù)式組件的模板，請將 functional 特性添加到模板塊中。這樣做以后就可以省略 <script> 塊中的 functional 選項。

總結

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論