vue如何使用vue-loader
这篇文章主要介绍vue如何使用vue-loader,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
成都创新互联公司专注为客户提供全方位的互联网综合服务,包含不限于网站设计、成都网站设计、徽县网络推广、微信小程序定制开发、徽县网络营销、徽县企业策划、徽县品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;成都创新互联公司为所有大学生创业者提供徽县建站搭建服务,24小时服务热线:13518219792,官方网址:www.cdcxhl.com
vue-loader小技巧
vue-loader 是处理 *.vue 文件的 webpack loader。它本身提供了丰富的 API,有些 API 很实用但很少被人熟知。例如接下来要介绍的 preserveWhitespace 和 transformToRequire
1 用 preserveWhitespace 减少文件体积
有些时候我们在写模板时不想让元素和元素之间有空格,可能会写成这样:
- 1111
- 2222
- 333
当然还有其他方式,比如设置字体的 font-size: 0 ,然后给需要的内容单独设置字体大小,目的是为了去掉元素间的空格。其实我们完全可以通过配置 vue-loader 实现这一需求。
{ vue: { preserveWhitespace: false } }
它的作用是阻止元素间生成空白内容,在 Vue 模板编译后使用 _v(" ") 表示。如果项目中模板内容多的话,它们还是会占用一些文件体积的。例如 Element 配置该属性后,未压缩情况下文件体积减少了近 30Kb。
2 使用 transformToRequire 再也不用把图片写成变量了
以前在写 Vue 的时候经常会写到这样的代码:把图片提前 require 传给一个变量再传给组件。
其实通过配置 transformToRequire 后,就可以直接配置,这样vue-loader会把对应的属性自动 require 之后传给组件
{ vue: { transformToRequire: { avatar: ['default-src'] } } }
于是我们代码就可以简化不少
在 vue-cli 的 webpack 模板下,默认配置是:
transformToRequire: { video: ['src', 'poster'], source: 'src', img: 'src', image: 'xlink:href' }
以上是“vue如何使用vue-loader”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
标题名称:vue如何使用vue-loader
转载源于:http://pwwzsj.com/article/pcdhji.html