介绍
今天就跟大家聊聊有关如何在vue-loader中引入模板预处理器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
vue-loader是一个webpack的装载机,可以将指定格式编写的Vue组件转换为JavaScript模块
同时,vue-loader支持使用非默认语言,通过设置语言块的朗属性,就可以使用指定的预处理器,比如最常见的sass语法:
& lt; style lang=皊ass"比;
,……
& lt;/style> 这里重点讨论使用不同的js模板引擎作为预处理器,
下面示例使用了哈巴狗模板引擎
& lt; template lang=皃ug"比;
,div
,h2 Hello 世界!
& lt;/template> <强> 1。支持哪些模板引擎
第十四节或更低版本使用巩固来编译& lt;模板lang=皒xx"祝辞,所以支持的模板引擎,从巩固的支持列表中可以找到,包括了大部分引擎,
在vue-loader/预处理器。js文件里面,
//, loader for pre-processing templates with 如只哈巴狗
const cons =,要求(& # 39;巩固# 39;)
const loaderUtils =,要求(& # 39;loader-utils& # 39;)
{const loadOptions },=,要求(& # 39;. ./跑龙套options-cache& # 39;)
时间=module.exports function (内容),{
,const callback =, this.async ()
,const opt =, loaderUtils.getOptions(这),| |,{}
(!,if 缺点[opt.engine]), {
,return 回调(
new 才能;错误(
“才能Template engine & # 39;“+
,,opt.engine +
,才能“& # 39;,“+
,,,不愿# 39;t available 拷贝Consolidate.js"
,,)
,)
,}
,//allow passing options 用,template preprocessor via “模板”选项
,const vueOptions =, loadOptions (opt.optionsId)
,if (vueOptions.template), {
,Object.assign(选择,vueOptions.template)
,}
,//for relative 包括=,opt.filename this.resourcePath
,反对[opt.engine] .render(内容,选择,,(呃,,html),=祝辞,{
,if (错),{
return 才能回调(err)
,}
,回调(null, html)
,})
} 可以看的到,使用整合进行预处理。
v15及以上版本,允许对vue组件中的每个部分使用其他的webpack装载机,可以正常使用各种模板引擎。
使用@vue/component-compiler-utils工具编译模板,实际在component-compiler-utils中编译模板时,也把巩固作为预处理器,使用consolidate.render编译成字符串。
<强> 2。引入哈巴狗
需安装pug-plain-loader,利用它返回一个编译好的HTML字符串,
在最新的vue-cli@3。x配置中,默认已配置好哈巴狗的相关装载机,所以安装完可以直接在& lt;模板/祝辞中使用,
/*, config.module.rule(& # 39;哈巴狗# 39;),*/{才能
,,测试:/\ .pug/美元,
,,其中:[
,,/*,config.module.rule(& # 39;哈巴狗# 39;).oneOf (& # 39; pug-vue& # 39;), */,,{
,,resourceQuery:/vue/,
,,,使用:[
,,,/*,config.module.rule(& # 39;哈巴狗# 39;).oneOf (& # 39; pug-vue& # 39;) .use (& # 39; pug-plain-loader& # 39;), */,,,{
,,,装载机:,& # 39;pug-plain-loader& # 39;
,,,}
,,,)
,,},
,,/*,config.module.rule(& # 39;哈巴狗# 39;).oneOf (& # 39; pug-template& # 39;), */,,{
,,,使用:[
,,,/*,config.module.rule(& # 39;哈巴狗# 39;).oneOf (& # 39; pug-template& # 39;) .use(& # 39;生# 39;),*/,,,{
,,,装载机:,& # 39;raw-loader& # 39;
,,,},
,,,/*,config.module.rule(& # 39;哈巴狗# 39;).oneOf (& # 39; pug-template& # 39;) .use (& # 39; pug-plain& # 39;), */,,,{
,,,装载机:,& # 39;pug-plain-loader& # 39;
,,,}
,,,)
,,}
,,)
,,}, <强> 3。引入dotjs或其他模板引擎,
需在vue.confg。js里面手动配置装载机,配置规则跟引入哈巴狗类似,修改相关装载机即可。
还有一点比较特殊,该模板引擎对应的装载机,必须返回字符串,
比如我们使用dotjs-loader,来解析dotjs模板,就会报错,然后查看dotjs-loader,发现
return & # 39; export default & # 39;, +, doT.template(源); 最后返回导出结果,doT.template(源)执行成功后,返回一个匿名函数,
所以想要返回最终的字符串,只有传入数据,执行函数doT.template(源)(数据).
直接使用dotjs-loader无法达到上面的要求,只有修改装载机中的返回格式,具体可以参考pug-plain-loader,逻辑比较简单,传入模板引擎相关参数,选择对应webpack配置中选择的参数,最后返回编译后的字符串。
