這篇文章主要介紹vue如何使用vue-loader,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司專(zhuān)注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)、徽縣網(wǎng)絡(luò)推廣、微信小程序定制開(kāi)發(fā)、徽縣網(wǎng)絡(luò)營(yíng)銷(xiāo)、徽縣企業(yè)策劃、徽縣品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);成都創(chuàng)新互聯(lián)公司為所有大學(xué)生創(chuàng)業(yè)者提供徽縣建站搭建服務(wù),24小時(shí)服務(wù)熱線:13518219792,官方網(wǎng)址:www.cdcxhl.com
vue-loader小技巧
vue-loader 是處理 *.vue 文件的 webpack loader。它本身提供了豐富的 API,有些 API 很實(shí)用但很少被人熟知。例如接下來(lái)要介紹的 preserveWhitespace 和 transformToRequire
1 用 preserveWhitespace 減少文件體積
有些時(shí)候我們?cè)趯?xiě)模板時(shí)不想讓元素和元素之間有空格,可能會(huì)寫(xiě)成這樣:
當(dāng)然還有其他方式,比如設(shè)置字體的 font-size: 0 ,然后給需要的內(nèi)容單獨(dú)設(shè)置字體大小,目的是為了去掉元素間的空格。其實(shí)我們完全可以通過(guò)配置 vue-loader 實(shí)現(xiàn)這一需求。
{ vue: { preserveWhitespace: false } }
它的作用是阻止元素間生成空白內(nèi)容,在 Vue 模板編譯后使用 _v(" ") 表示。如果項(xiàng)目中模板內(nèi)容多的話,它們還是會(huì)占用一些文件體積的。例如 Element 配置該屬性后,未壓縮情況下文件體積減少了近 30Kb。
2 使用 transformToRequire 再也不用把圖片寫(xiě)成變量了
以前在寫(xiě) Vue 的時(shí)候經(jīng)常會(huì)寫(xiě)到這樣的代碼:把圖片提前 require 傳給一個(gè)變量再傳給組件。
其實(shí)通過(guò)配置 transformToRequire 后,就可以直接配置,這樣vue-loader會(huì)把對(duì)應(yīng)的屬性自動(dòng) require 之后傳給組件
{ vue: { transformToRequire: { avatar: ['default-src'] } } }
于是我們代碼就可以簡(jiǎn)化不少
在 vue-cli 的 webpack 模板下,默認(rèn)配置是:
transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' }
以上是“vue如何使用vue-loader”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!