來聊聊 Vue Loader

時間 2019-12-19

標籤聊聊 vue loader 简体版

原文原文鏈接

Vue Loader

vue-loader.vuejs.org/zh/javascript

Vue Loader 是什麼？

Vue Loader 是一個 webpack 的 loader，它容許你以一種名爲單文件組件 SFC的格式撰寫 Vue 組件：css

<template>
  <div class="example">{{ msg }}</div>
</template>
複製代碼

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>
複製代碼

<style>
.example {
  color: red;
}
</style>
複製代碼

Vue Loader 還提供了不少酷炫的特性：

容許爲 Vue 組件的每一個部分使用其它的 webpack loader，例如在 <style> 的部分使用 Sass 和在 <template> 的部分使用 Pug；
容許在一個 .vue 文件中使用自定義塊，並對其運用自定義的 loader 鏈；
使用 webpack loader 將 <style> 和 <template> 中引用的資源看成模塊依賴來處理；
爲每一個組件模擬出 scoped CSS；
在開發過程當中使用熱重載來保持狀態。

簡而言之，webpack 和 Vue Loader 的結合爲你提供了一個現代、靈活且極其強大的前端工做流，來幫助撰寫 Vue.js 應用。html

若是你不想手動設置 webpack，咱們推薦使用 Vue CLI 直接建立一個項目的腳手架。經過 Vue CLI 建立的項目會針對多數常見的開發需求進行預先配置，作到開箱即用。前端

處理資源路徑

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

<img src="../image.png">
複製代碼

github.com/webpack-con…java

轉換規則

資源 URL 轉換會遵循以下規則：webpack

若是路徑是絕對路徑 (例如 /images/foo.png)，會原樣保留。git
若是路徑以 . 開頭，將會被看做相對的模塊依賴，並按照你的本地文件系統上的目錄結構進行解析。github
若是路徑以 ~ 開頭，其後的部分將會被看做模塊依賴。這意味着你能夠用該特性來引用一個 Node 依賴中的資源：web

<img src="~some-npm-package/foo.png">

若是路徑以 @ 開頭，也會被看做模塊依賴。若是你的 webpack 配置中給 @ 配置了 alias，這就頗有用了。全部 vue-cli 建立的項目都默認配置了將 @ 指向 /src

轉換資源 URL 的好處是：

file-loader 能夠指定要複製和放置資源文件的位置，以及如何使用版本哈希命名以得到更好的緩存。此外，這意味着你能夠就近管理圖片文件，能夠使用相對路徑而不用擔憂部署時 URL 的問題。使用正確的配置，webpack 將會在打包輸出中自動重寫文件路徑爲正確的 URL。
url-loader 容許你有條件地將文件轉換爲內聯的 base-64 URL (當文件小於給定的閾值)，這會減小小文件的 HTTP 請求數。若是文件大於該閾值，會自動的交給 file-loader 處理。

@ 別名在 .vue <style> 裏沒法加載圖片的問題

github.com/vuejs/vue-l…

Scoped CSS

當 <style> 標籤有 scoped 屬性時，它的 CSS 只做用於當前組件中的元素。

<style scoped>
.example {
  color: red;
}
</style>
複製代碼

<template>
  <div class="example">hi</div>
</template>
複製代碼

轉換結果：

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
複製代碼

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>
複製代碼

你能夠在一個組件中同時使用有 scoped 和非 scoped 樣式：

<style>
/* 全局樣式 */
</style>
複製代碼

<style scoped>
/* 本地樣式 */
</style>
複製代碼

深度做用選擇器

若是你但願 scoped 樣式中的一個選擇器可以做用得「更深」，例如影響子組件，你能夠使用 >>> 操做符：

<style scoped>
.a >>> .b { /* ... */ }
</style>
複製代碼

上述代碼將會編譯成：

.a[data-v-f3f3eg9] .b { /* ... */ }
複製代碼

還有一些要留意

Scoped 樣式不能代替 class。考慮到瀏覽器渲染各類 CSS 選擇器的方式，當 p { color: red } 是 scoped 時 (即與特性選擇器組合使用時) 會慢不少倍。若是你使用 class 或者 id 取而代之，好比 .example { color: red }，性能影響就會消除。

熱重載

當使用腳手架工具 vue-cli 時，熱重載是開箱即用的。

狀態保留規則

當編輯一個組件的 <template> 時，這個組件實例將就地從新渲染，並保留當前全部的私有狀態。可以作到這一點是由於模板被編譯成了新的無反作用的渲染函數。
當編輯一個組件的 <script> 時，這個組件實例將就地銷燬並從新建立。(應用中其它組件的狀態將會被保留) 是由於 <script> 可能包含帶有反作用的生命週期鉤子，因此將從新渲染替換爲從新加載是必須的，這樣作能夠確保組件行爲的一致性。這也意味着，若是你的組件帶有全局反作用，則整個頁面將會被從新加載。
<style> 會經過 vue-style-loader 自行熱重載，因此它不會影響應用的狀態。