什么是Vue-loader?

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

一、處理資源路徑

當(dāng) Vue Loader 編譯單文件組件中的 <template> 塊時(shí)，它也會將所有遇到的資源 URL 轉(zhuǎn)換為 webpack 模塊請求。

例如：

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

將會被編譯為一個(gè) 模塊請求：

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

默認(rèn)下列標(biāo)簽/特性的組合會被轉(zhuǎn)換，且這些組合時(shí)可以使用 transformAssetUrls 選項(xiàng)進(jìn)行配置的。

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

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

轉(zhuǎn)換規(guī)則 

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

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

為什么要轉(zhuǎn)換資源URL（好處）

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

二、使用預(yù)處理器

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

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

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

三、Scoped CSS

當(dāng) <style> 標(biāo)簽有 scoped 屬性時(shí)，它的 CSS 只作用于當(dāng)前組件中的元素。

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

3.1 混用組件和全局樣式

可以在一個(gè)組件中同時(shí)使用有 scoped 和非 scoped 樣式：

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

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

3.2 子組件根元素

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

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

3.3 深度作用選擇器

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

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

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

注意：

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

四、熱重載

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

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

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

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

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

五、函數(shù)式組件

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

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

總結(jié)

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

最新評論