这篇文章主要介绍Vue如何使用vue-loader,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!vue-loader小技巧vue-loader 是处理 *.vue 文件的 webpa
这篇文章主要介绍Vue如何使用vue-loader,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
vue-loader小技巧
vue-loader 是处理 *.vue 文件的 webpack loader。它本身提供了丰富的 api,有些 API 很实用但很少被人熟知。例如接下来要介绍的 preserveWhitespace 和 transfORMToRequire
1 用 preserveWhitespace 减少文件体积
有些时候我们在写模板时不想让元素和元素之间有空格,可能会写成这样:
<ul>
<li>1111</li><li>2222</li><li>333</li>
</ul>
当然还有其他方式,比如设置字体的 font-size: 0 ,然后给需要的内容单独设置字体大小,目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。
{
vue: {
preserveWhitespace: false
}
}
它的作用是阻止元素间生成空白内容,在 Vue 模板编译后使用 _v(" ") 表示。如果项目中模板内容多的话,它们还是会占用一些文件体积的。例如 Element 配置该属性后,未压缩情况下文件体积减少了近 30Kb。
2 使用 transformToRequire 再也不用把图片写成变量了
以前在写 Vue 的时候经常会写到这样的代码:把图片提前 require 传给一个变量再传给组件。
<template>
<div>
<avatar :default-src="DEFAULT_AVATAR"></avatar>
</div>
</template>
<script>
export default {
created () {
this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
}
}
</script>
其实通过配置 transformToRequire 后,就可以直接配置,这样vue-loader会把对应的属性自动 require 之后传给组件
{
vue: {
transformToRequire: {
avatar: ['default-src']
}
}
}
于是我们代码就可以简化不少
<template>
<div>
<avatar default-src="./assets/default-avatar.png"></avatar>
</div>
</template>
在 vue-cli 的 WEBpack 模板下,默认配置是:
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
以上是“vue如何使用vue-loader”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网VUE频道!
--结束END--
本文标题: vue如何使用vue-loader
本文链接: https://www.lsjlt.com/news/95256.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0