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 入门讲解1
Apr 15 Javascript
node.js中的http.response.getHeader方法使用说明
Dec 14 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
原生javascript实现图片按钮切换
Jan 12 Javascript
JavaScript中实现无缝滚动、分享到侧边栏实例代码
Apr 06 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
Nov 22 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 jQuery
解决vue的变量在settimeout内部效果失效的问题
Aug 30 Javascript
vue实现滑动切换效果(仅在手机模式下可用)
Jun 29 Javascript
angularjs模态框的使用代码实例
Dec 20 Javascript
node.js中fs文件系统模块的使用方法实例详解
Feb 13 Javascript
分享8个JavaScript库可更好地处理本地存储
Oct 12 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
wiki-shan写的php在线加密的解密程序
2008/09/07 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
针对thinkPHP5框架存储过程bug重写的存储过程扩展类完整实例
2018/06/16 PHP
动态改变textbox的宽高的js
2006/10/26 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
javascript采用数组实现tab菜单切换效果
2012/12/12 Javascript
使用AngularJS创建单页应用的编程指引
2015/06/19 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
2016/08/18 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
Javascript网页抢红包外挂实现分享
2018/01/11 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
JavaScript中AOP的实现与应用
2019/05/06 Javascript
python三元运算符实现方法
2013/12/17 Python
Python用Bottle轻量级框架进行Web开发
2016/06/08 Python
python实现生命游戏的示例代码(Game of Life)
2018/01/24 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
python实例化对象的具体方法
2020/06/17 Python
python中return如何写
2020/06/18 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
葡萄牙鞋子品牌:Fair
2016/12/10 全球购物
阿迪达斯墨西哥官方网站:adidas墨西哥
2017/11/03 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
市政管理求职信范文
2014/05/07 职场文书
2014年司机工作总结
2014/11/21 职场文书
篮球赛新闻稿
2015/07/17 职场文书
大学生支教感言
2015/08/01 职场文书
JavaScript 防篡改对象的用法示例
2021/04/24 Javascript
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
详细介绍MySQL中limit和offset的用法
2022/05/06 MySQL