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

Vue -loader 会解析文件, 提取出每个语言块, 如果有必要会通过其他loader 处理, 最后将他们组装成一个 commonjs 模块; module.exports 出一个Vue.js 组 件对象;
1) < temlate>语言块
( 1) 默认语言: html
( 2) 每个.Vue 文件最多包含一个< template>块
( 3) 内容将被提取为字符串, 将编译用作 Vue 组件的 template 选项;
2) < script>
( 1) 默认语言: JS( 在监测到 babel-loader 或者 buble-loader 配置时, 自动
支持 ES2015)
( 2) 每个.Vue 文件最多包含一个< script>块
( 3) 该脚本在类 CommonJS 环境中执行( 就像通过 webpack 打包的正常 JS 模
块)。 所以你可以 require()其他依赖。 在 ES2015 支持下, 也可以使用 import
跟 export 语法
( 4) 脚本必须导出 Vue.js 组件对象, 也可以导出由 Vue.extend()创建的扩展
对象; 但是普通对象是更好的选择;
3) < style>
默认语言:
css
1、 一个.Vue 文件可以包含多个< style>标签
2、 这个标签可以有 scoped 或者 module 属性来帮助你讲样式封装到当前组
件; 具有不同封装模式的多个< style>标签可以在同一个组件中混合使用
3、 默认情况下, 可以使用 style-loader 提取内容, 并且通过< style>标签动
态假如文档的< head>中, 也可以配置 webpack 将所有的 styles 提取到单个
CSS 文件中;
4) 自定义块
可以在.Vue 文件中添加额外的自定义块来实现项目的特殊需求; 例如< docs> 块; Vue-loader 将会使用标签名来查找对应的 webpack loaders 来应用到对应 的模块上; webpack 需要在 Vue-loader 的选项 loaders 中指定; Vueloader 支持使用非默认语言, 比如 CSS 预处理器, 预编译的 HTML 模板语言,
通过设置语言块的 lang 属性:

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值