当前位置:首页 > vue技术文章 > vue-loader中引入模板预处理器的实现

实例讲解如何在vue-loader中引入模板预处理器

  • 发布时间:
  • 作者:码农之家原创
  • 点击:187

这篇文章主要知识点是关于vue、loader、预处理器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF作者:王松
立即下载

vue-loader中引入模板预处理器的实现

vue-loader 是一个 webpack 的 loader,可以将指定格式编写的 Vue 组件转换为 JavaScript模块

同时,vue-loader 支持使用非默认语言,通过设置语言块的lang属性,就可以使用指定的预处理器,比如最常见的sass 语法:

<style lang="sass">
 ...
</style>

这里重点讨论使用不同的js模板引擎作为预处理器,

下面示例使用了pug模板引擎

<template lang="pug">
 div
 h1 Hello world!
</template>

1. 支持哪些模板引擎

v14 或更低版本使用 consolidate 来编译 <template lang="xxx">, 所以支持的模板引擎,从consolidate的支持列表中可以找到,包括了大部分引擎,

在vue-loader/preprocessor.js 文件里面,

// loader for pre-processing templates with e.g. pug
const cons = require('consolidate')
const loaderUtils = require('loader-utils')
const { loadOptions } = require('../utils/options-cache')

module.exports = function (content) {
 const callback = this.async()
 const opt = loaderUtils.getOptions(this) || {}

 if (!cons[opt.engine]) {
 return callback(
  new Error(
  "Template engine '" +
   opt.engine +
   "' " +
   "isn't available in Consolidate.js"
  )
 )
 }

 // allow passing options to the template preprocessor via `template` option
 const vueOptions = loadOptions(opt.optionsId)
 if (vueOptions.template) {
 Object.assign(opt, vueOptions.template)
 }

 // for relative includes
 opt.filename = this.resourcePath

 cons[opt.engine].render(content, opt, (err, html) => {
 if (err) {
  return callback(err)
 }
 callback(null, html)
 })
}

可以看到,使用consolidate 进行预处理。

v15 及以上版本,允许对vue组件中的每个部分使用其他的webpack loader,可以正常使用各种模板引擎。

使用@vue/component-compiler-utils 工具编译模板,实际在component-compiler-utils中编译template时,也把consolidate作为预处理器,使用consolidate.render编译成字符串。

2. 引入pug

需安装pug-plain-loader,利用它返回一个编译好的 HTML 字符串,

在最新的vue-cli@3.x 配置中,默认已配置好pug的相关loader, 所以安装完可以直接在<template/>中使用,

/* config.module.rule('pug') */
  {
  test: /\.pug$/,
  oneOf: [
   /* config.module.rule('pug').oneOf('pug-vue') */
   {
   resourceQuery: /vue/,
   use: [
    /* config.module.rule('pug').oneOf('pug-vue').use('pug-plain-loader') */
    {
    loader: 'pug-plain-loader'
    }
   ]
   },
   /* config.module.rule('pug').oneOf('pug-template') */
   {
   use: [
    /* config.module.rule('pug').oneOf('pug-template').use('raw') */
    {
    loader: 'raw-loader'
    },
    /* config.module.rule('pug').oneOf('pug-template').use('pug-plain') */
    {
    loader: 'pug-plain-loader'
    }
   ]
   }
  ]
  },

3. 引入dotjs或其他模板引擎,

需在vue.confg.js 里面手动配置loader, 配置规则跟引入pug类似,修改相关loader即可。

还有一点比较特殊,该模板引擎对应的loader, 必须返回字符串,

比如我们使用dotjs-loader,来解析dotjs模板,就会报错,然后查看dotjs-loader,发现

return 'export default ' + doT.template(source);

最后返回导出结果, doT.template(source)执行成功后,返回一个匿名函数,

所以想要返回最终的字符串,只有传入数据,执行函数 doT.template(source)(data)。

直接使用dotjs-loader无法达到上面的要求,只有修改loader中的返回格式,具体可以参考pug-plain-loader, 逻辑比较简单,传入模板引擎相关参数,options对应webpack 配置中的options参数,最后返回编译后的字符串。

const pug = require('pug')
const loaderUtils = require('loader-utils')

module.exports = function (source) {
 const options = Object.assign({
 filename: this.resourcePath,
 doctype: 'html',
 compileDebug: this.debug || false
 }, loaderUtils.getOptions(this))

 const template = pug.compile(source, options)
 template.dependencies.forEach(this.addDependency)
 return template(options.data || {})
}

这里可以发现问题,上面代码中options.data只是在webpack配置时传入的,并不是正式的下发数据,使用预处理模板引擎,为了返回字符串,编译函数执行在loader中进行,没有办法传入数据data,参与编译。

而且模板引擎的相关语法,不能与vue 的模板语法冲突,这样会导致js模板引擎解析后,再进行vue 模板解析时报错

如果只是纯静态页面,可以直接把需要经过模板引擎编译的内容部分抽离出去,使用require引入时,webpack会自动对应loader,解析完成后,只需在当前组件中传入data,通过v-html把生成的字符串当成HTML标签解析后输出。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

推荐内容

深入分析JDK1.6集合框架bug 6260652

实例分析jQuery设置和移除文本框默认值的方法

深入解析python中的实例方法、类方法和静态方法

深入理解Python中的命名空间和范围

微信小程序修改swiper默认指示器样式示例效果

展开 +

收起 -

vue 相关电子书
学习笔记
网友NO.658621

vue-loader教程介绍

在最初使用webpack+vue时,看到vue里面各种语法,包括import,export,html和css的写作方式,我都能依葫芦画瓢地实现各种功能,但是为什么能这样写,一直不太理解,直到我了解了vue-loader。 vue-loader功能 如图,webpack的功能就是将左侧用户编写的代码(只要有相应的loader,可以使用任何符合自己习惯的编写方式)转换成右侧浏览器能识别的js。 vue-loader就是告诉webpack如何将vue格式的文件转换成js。 vue组件格式 .vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 template, script 和 style,还允许添加可选的自定义块: template div class="example"{{ msg }}/div/templatescriptexport default { data() { return { msg: 'Hello world!' } }}/scriptstyle.example { color: red;}/stylecustom1 This could be e.g. documentation for the component./custom1 vue-loader 会解析文件,……

网友NO.435006

vue-content-loader内容加载器的使用方法

当我们开发网站或者APP时,遇到内容过多加载速度慢时,会导致用户打开页面有大量空白页,vue-content-loader正是解决这个问题的一个组件,使加载内容之前生成一个dom模板,提高用户体验。 第一步:安装 在控制台的项目路径下执行: npm install vue-content-loader --save 第二步:引入使用 template !--content-loader/content-loader-- facebook-loader/facebook-loader/templatescript//import { ContentLoader } from 'vue-content-loader'import {//ContentLoader, FacebookLoader} from 'vue-content-loader' // 已安装npm install vue-content-loader --saveexport default { components: {// ContentLoader, FacebookLoader }}/scriptstyle/style 总结 以上所述是小编给大家介绍的vue-content-loader内容加载器的使用方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的! ……

网友NO.628792

vue webuploader 文件上传组件开发

最近项目中需要用到百度的webuploader大文件的分片上传,对接后端的fastdfs,于是着手写了这个文件上传的小插件,步骤很简单,但是其中猜到的坑也不少,详细如下: 一、封装组件 引入百度提供的webuploader.js、Uploader.swf css样式就直接写在组件里面了 template div div id="list" class="uploader-list"/div div id="wrapper" div class="uploader-container" div :id="id" limitSize="1" :ext="ext"/div el-button size="small" :loading="uploadLoading" type="success" @click="start"上传到服务器/el-button el-button :disabled="stopBtn" size="small" type="danger" @click="stop"暂停上传/el-button /div /div div class="el-upload__tip"{{tip}}/div div class="file-list" ul class="el-upload-list el-upload-list--text" li v-for="file in fileList" :class="['el-upload-list__item', 'is-' + file.status]" :key="file" a class="el-upload-list__item-name" i class="el-icon-document"/i{{file.name}} /a label class="el-upload-list__item-s……

网友NO.521483

vue2.0安装style/css loader的方法

项目需要引用额外的ui组件库,就需要安装style-loader和css-loader 安装style-loader (css-loader默认有) npm install style-loader -D 然后,打开模板build--webpack.base.conf.js( 根据初始化模板不同也可能是 build 下面的webpack.base.conf.js ),新增一个json,注意style!css顺序不能颠倒(!表示连接) 补充: 2.0 以后应该写成 style-loader!css-loader ( -loader 不能省略) 以上这篇vue2.0安装style/css loader的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.863012

移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能

面向百度开发 html van-uploader :after-read="onRead" accept="image/*" img src="./icon_input_add.png" / /van-uploader js data() { return { files: { name: "", type: "" }, headerImage: null, picValue: null, upImgUrl, } }, // 组件方法 获取 流 async onRead(file) { // console.log(file); // console.log(file.file); this.files.name = file.file.name; // 获取文件名 this.files.type = file.file.type; // 获取类型 this.picValue = file.file; // 文件流 this.imgPreview(this.picValue); }, // 处理图片 imgPreview(file) { let self = this; let Orientation; //去获取拍照时的信息,解决拍出来的照片旋转问题 Exif.getData(file, function () { Orientation = Exif.getTag(this, "Orientation"); }); // 看支持不支持FileReader if (!file || !window.FileReader) return; if (/^image/.test(file.type)) { // 创建一个reader let reader = new FileReader(); // 将图片2将转成 base64 格式 reader.readAsDataURL(file); // 读取成功后的回调 reader.onloadend = function……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757