Vue项目中配置pug解析支持


Posted in Javascript onMay 10, 2019

Vue 的用法没有变化:

<template lang="pug">
 transition(name="sider")
  div.hello
   h3 {{msg}}
   p(:style="{color:'#000'}", :htmlData="msg") p label
   button(@click="clickMe") clickTest
</template>

要注意的一点是: 标签后面如果有属性(括号内的) 他和括号之间不要加空格,加了空格就会被当成字符串解析

vue-cli 2+ 配置:

下载包:

npm i -D pug pug-html-loader

在build/webpack.base.conf.js 的 module 中添加规则:

module: {
  rules: [
   {
    test:/\.pug$/,
    loader: "pug-html-loader"
   },
   // 省略其他规则
  ]
 }

好了启动或重启项目,即可开心的尝试了

vue-cli 3 配置:

由于 cli 升级到3了,相关配置发生了很大的改变,所以要和2的更改不同:

下载包:

npm i -D pug pug-html-loader pug-plain-loader

和2比多了一个 pug-plain-loader

在 vue.config.js (如果没有就在根目录下新建一个) 添加代码:

module.exports = {
  chainWebpack: config => {
    config.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-html-loader')
      .loader('pug-html-loader')
      .end()
  }
}

重启项目即可正常使用; 严格来说, vue-cli3 更像一种插件的使用,但是对于一些新人来说,可能还不习惯这样的操作吧

总结

以上所述是小编给大家介绍的Vue项目中配置pug解析支持,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
PHP 与 js的通信(via ajax,json)
Nov 16 Javascript
JavaScript数据结构和算法之图和图算法
Feb 11 Javascript
JS获取iframe中longdesc属性的方法
Apr 01 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
跟我学习javascript的定时器
Nov 19 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
Nov 25 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
Angular2实现的秒表及改良版示例
May 10 #Javascript
node中IO以及定时器优先级详解
May 10 #Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 #Javascript
Easyui 去除jquery-easui tab页div自带滚动条的方法
May 10 #jQuery
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 #Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 #Javascript
微信小程序中显示倒计时代码实例
May 09 #Javascript
You might like
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP提示Cannot modify header information - headers already sent by解决方法
2014/09/22 PHP
twig里使用js变量的方法
2016/02/05 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
javascript:void(0)的真正含义实例分析
2008/08/20 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jquery中实现标签切换效果的代码
2011/03/01 Javascript
JavaScript异步调用定时方法并停止该方法实现代码
2012/03/16 Javascript
jquery实现弹出窗口效果的实例代码
2013/11/28 Javascript
js改变鼠标的形状和样式的方法
2014/03/31 Javascript
字段太多jquey快速清空表单内容方法
2014/08/21 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
JS使用JSON作为参数实例分析
2016/06/23 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
Bootstrap table使用方法记录
2017/08/23 Javascript
vue实现循环切换动画
2018/10/17 Javascript
python服务器与android客户端socket通信实例
2014/11/12 Python
python之Character string(实例讲解)
2017/09/25 Python
从django的中间件直接返回请求的方法
2018/05/30 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python 实现波浪滤镜特效
2020/12/02 Python
10种CSS3实现的loading动画,挑一个走吧?
2020/11/16 HTML / CSS
法国体育用品商店:GO Sport
2019/10/23 全球购物
毕业生简单求职信
2013/11/19 职场文书
暑期实践思想汇报
2014/01/06 职场文书
九年级体育教学反思
2014/01/23 职场文书
事务机电主管工作职责
2014/02/25 职场文书
我爱读书演讲稿
2014/05/07 职场文书
银行优秀员工事迹材料
2014/05/29 职场文书
政府班子四风问题整改措施
2014/10/04 职场文书
2014年营业员工作总结
2014/11/18 职场文书
廉洁自律承诺书范文
2015/04/28 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
经济纠纷起诉状
2015/05/20 职场文书
离婚案件被告代理词
2015/05/23 职场文书