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 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
c#和Javascript操作同一json对象的实现代码
Jan 17 Javascript
javascript中普通函数的使用介绍
Dec 19 Javascript
js中的for如何实现foreach中的遍历
May 31 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
详解AngularJS中的filter过滤器用法
Jan 04 Javascript
jQuery实现的自定义滚动条实例详解
Sep 20 Javascript
关于vue面试题汇总
Mar 20 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
对vue中的事件穿透与禁止穿透实例详解
Oct 28 Javascript
Javascript查看大图功能代码实现
May 07 Javascript
Javascript实现关闭广告效果
Jan 29 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
其他功能
2006/10/09 PHP
解析PHP提交后跳转
2013/06/23 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
js word表格动态添加代码
2010/06/07 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
js函数调用的方式
2014/05/06 Javascript
Node.js编写爬虫的基本思路及抓取百度图片的实例分享
2016/03/12 Javascript
BootStrap响应式导航条实例介绍
2016/05/06 Javascript
jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
2016/06/08 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
NodeJs的优势和适合开发的程序
2016/08/14 NodeJs
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
小程序实现多列选择器
2019/02/15 Javascript
JS实现马赛克图片效果完整示例
2019/04/13 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
Python使用PIL模块生成随机验证码
2017/11/21 Python
Python实现判断一行代码是否为注释的方法
2018/05/23 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
selenium+python实现自动登陆QQ邮箱并发送邮件功能
2019/12/13 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Django实现文章详情页面跳转代码实例
2020/09/16 Python
python实现自动打卡的示例代码
2020/10/10 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
Book Depository欧盟:一家领先的国际图书零售商
2019/05/21 全球购物
C语言面试题
2015/10/30 面试题
跟单文员的岗位职责
2013/11/14 职场文书
安全生产管理责任书
2014/04/16 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2015年采购员工作总结
2015/04/27 职场文书
李强感恩观后感
2015/06/17 职场文书
《迟到》教学反思
2016/02/24 职场文书