Vue-loader 是什么?使用它的用途有哪些?

vue-loader 会解析文件,提取出每个语言块,如果有必要会通过其他 loader 处理,最后将他 们组装成一个 commonjs 模块;module.exports 出一个 vue.js 组件对象

1、< temlate>语言块

        1,1)默认语言:html
        1,2)每个.vue 文件最多包含一个< template>块
        1,3)内容将被提取为字符串,将编译用作 VUE 组件的 template 选项

2、< script>

        2,1)默认语言:JS(在监测到 babel-loader 或者 buble-loader 配置时,自动支持 ES2015)
        2,2)每个.vue 文件最多包含一个< script>块
        2,3)该脚本在类 CommonJS 环境中执行(就像通过 webpack 打包的正常 JS 模块)。所以你可以 require()其他依赖。在 ES2015 支持下,也可以使用 import 跟 export 语法
        2,4)脚本必须导出 Vue.js 组件对象,也可以导出由 VUE.extend()创建的扩展对象;但是普
通对象是更好的选择

3、< style>

        默认语言:css
        3,1)一个.vue 文件可以包含多个< style>标签
        3,2)这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组件;具有不同
封装模式的多个< style>标签可以在同一个组件中混合使用
        3,3)默认情况下,可以使用 style-loader 提取内容,并且通过< style>标签动态假如文档
的< head>中,也可以配置 webpack 将所有的 styles 提取到单个 CSS 文件中

4、自定义块

        可以在.vue 文件中添加额外的自定义块来实现项目的特殊需求;例如< docs>块;vue-loader
将会使用标签名来查找对应的 webpack loaders 来应用到对应的模块上;webpack需要在 vue-loader 的选项 loaders 中指定 vue-loader 支持使用非默认语言,比如 CSS 预处理器,预编译的 HTML 模板语言,通过设置语言 块的 lang 属性:
<style lang='sass'>
/*sass*/
</style>
  • 6
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ling…

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值