您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“Vue loader的相關(guān)知識有哪些”的有關(guān)知識,在實(shí)際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
當(dāng) Vue Loader 編譯單文件組件中的 <template>
塊時,它也會將所有遇到的資源 URL 轉(zhuǎn)換為 webpack 模塊請求。
例如:
<img src="../image.png">
將會被編譯為一個 模塊請求:
createElement('img', { attrs: { src: require('../image.png') // 現(xiàn)在這是一個模塊的請求了 } })
默認(rèn)下列標(biāo)簽/特性的組合會被轉(zhuǎn)換,且這些組合時可以使用 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 也會被同等處理
資源 URL 轉(zhuǎn)換會遵循如下規(guī)則: 如果路徑是絕對路徑 (例如 /images/foo.png),會原樣保留。
如果路徑以 . 開頭,將會被看作相對的模塊依賴,并按照你的本地文件系統(tǒng)上的目錄結(jié)構(gòu)進(jìn)行解析。
如果路徑以 ~ 開頭,其后的部分將會被看作模塊依賴。這意味著你可以用該特性來引用一個 Node 依賴中的資源
如果路徑以 @開頭,也會被看作模塊依賴。如果你的 webpack 配置中給 @ 配置了 alias,這就很有用了。所有 vue-cli創(chuàng)建的項(xiàng)目都默認(rèn)配置了將 @ 指向 /src
因?yàn)橄?.png 這樣的文件不是一個 JavaScript 模塊,你需要配置 webpack 使用 file-loader 或者 url-loader 去合理地處理它們。通過 Vue CLI 創(chuàng)建的項(xiàng)目已經(jīng)把這些預(yù)配置好了。
file-loader 可以指定要復(fù)制和放置資源文件的位置,以及如何使用版本哈希命名以獲得更好的緩存。此外,這意味著 你可以就近管理圖片文件,可以使用相對路徑而不用擔(dān)心部署時 URL 的問題。使用正確的配置,webpack 將會在打包輸出中自動重寫文件路徑為正確的 URL。
url-loader 允許你有條件地將文件轉(zhuǎn)換為內(nèi)聯(lián)的 base-64 URL (當(dāng)文件小于給定的閾值),這會減少小文件的 HTTP 請求數(shù)。如果文件大于該閾值,會自動的交給 file-loader 處理。
在 webpack 中,所有的預(yù)處理器需要匹配對應(yīng)的 loader。Vue Loader 允許你使用其它 webpack loader 處理 Vue 組件的某一部分。
它會根據(jù) lang 特性以及你 webpack 配置中的規(guī)則自動推斷出要使用的 loader。
例如為了通過sass,less等來編譯<style>
,就配置相應(yīng)的loader即可
當(dāng) <style>
標(biāo)簽有 scoped
屬性時,它的 CSS 只作用于當(dāng)前組件中的元素。
這類似于 Shadow DOM 中的樣式封裝
可以在一個組件中同時使用有 scoped 和非 scoped 樣式:
<style> /* 全局樣式 */ </style> <style scoped> /* 本地樣式 */ </style>
使用 scoped
后,父組件的樣式將不會滲透到子組件中。不過一個子組件的根節(jié)點(diǎn)會同時受其父組件的 scoped CSS 和子組件的 scoped CSS 的影響。這樣設(shè)計(jì)是為了讓父組件可以從布局的角度出發(fā),調(diào)整其子組件根元素的樣式
通常為了避免組件之間樣式的相互影響,最好用的辦法就是在最外層添加一個不帶class屬性的div,這樣就不必去找根元素的類名然后避免重名這一麻煩的步驟了
如果你希望 scoped
樣式中的一個選擇器能夠作用得“更深”,例如影響子組件,你可以使用 >>>
操作符:
<style scoped> .a >>> .b { /* ... */ } </style>
PS:有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名,同樣可以正常工作
注意:
Scoped 樣式不能代替 class??紤]到瀏覽器渲染各種 CSS 選擇器的方式,當(dāng) p { color: red } 是 scoped 時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之,比如 .example {
color: red },性能影響就會消除。
在遞歸組件中小心使用后代選擇器! 對選擇器 .a .b 中的 CSS 規(guī)則來說,如果匹配 .a 的元素包含一個遞歸子組件,則所有的子組件中的 .b 都將被這個規(guī)則匹配
“熱重載”不只是當(dāng)你修改文件的時候簡單重新加載頁面。啟用熱重載后,當(dāng)你修改 .vue
文件時,該組件的所有實(shí)例將在不刷新頁面的情況下被替換。它甚至保持了應(yīng)用程序和被替換組件的當(dāng)前狀態(tài)!當(dāng)你調(diào)整模版或者修改樣式時,這極大地提高了開發(fā)體驗(yàn)。
當(dāng)編輯一個組件的 <template> 時,這個組件實(shí)例將就地重新渲染,并保留當(dāng)前所有的私有狀態(tài)。能夠做到這一點(diǎn)是因?yàn)槟0灞痪幾g成了新的無副作用的渲染函數(shù)
當(dāng)編輯一個組件的 <script> 時,這個組件實(shí)例將就地銷毀并重新創(chuàng)建。(應(yīng)用中其它組件的狀態(tài)將會被保留) 是因?yàn)?<script> 可能包含帶有副作用的生命周期鉤子,所以將重新渲染替換為重新加載是必須的,這樣做可以確保組件行為的一致性。這也意味著,如果你的組件帶有全局副作用,則整個頁面將會被重新加載
<style> 會通過 vue-style-loader 自行熱重載,所以它不會影響應(yīng)用的狀態(tài)。
用法之類的就不在這里這里了。
vue 提供了一種稱為函數(shù)式組件的組件類型,用來定義那些沒有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場景,它只接受一些props 來顯示組件。
要聲明一個應(yīng)該編譯為函數(shù)式組件的模板,請將 functional
特性添加到模板塊中。這樣做以后就可以省略 <script>
塊中的 functional 選項(xiàng)。
“Vue loader的相關(guān)知識有哪些”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。