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 相关文章推荐
JavaScript CSS菜单功能 改进版
Dec 20 Javascript
jquery插件corner实现圆角边框的方法
Mar 09 Javascript
js实现鼠标划过给div加透明度的方法
May 25 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
微信小程序 生命周期函数详解
May 24 Javascript
BootStrap中Table隐藏后显示问题的实现代码
Aug 31 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
Jun 11 Javascript
JavaScript代码调试方法实例小结
Jan 05 Javascript
vue中使用element组件时事件想要传递其他参数的问题
Sep 18 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
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
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
PHP文字转图片功能原理与实现方法分析
2017/08/31 PHP
jQuery判断checkbox是否选中的3种方法
2014/08/12 Javascript
jQuery实现定时读取分析xml文件的方法
2015/07/16 Javascript
浅谈JS中逗号运算符的用法
2016/06/12 Javascript
Google 地图控件集详解及实例代码
2016/08/06 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
vue之nextTick全面解析
2017/05/17 Javascript
vue.js实现条件渲染的实例代码
2017/06/22 Javascript
Web技术实现移动监测的介绍
2017/09/18 Javascript
Angular2.0实现modal对话框的方法示例
2018/02/18 Javascript
对vue.js中this.$emit的深入理解
2018/02/23 Javascript
详解AngularJS 过滤器的使用
2018/06/02 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
Vue中的methods、watch、computed的区别
2018/11/26 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
vue使用video插件vue-video-player的示例
2020/10/03 Javascript
详解Python的Django框架中的templates设置
2015/05/11 Python
Python通过select实现异步IO的方法
2015/06/04 Python
Python使用爬虫猜密码
2016/02/19 Python
Python面向对象特殊成员
2017/04/24 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python高斯消除矩阵
2019/01/02 Python
Python之lambda匿名函数及map和filter的用法
2019/03/05 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
PyCharm 专业版安装图文教程
2020/02/20 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python实现xml转json文件的示例代码
2020/12/30 Python
yy婚礼主持词
2014/03/14 职场文书
合作意向协议书范本
2014/03/31 职场文书
社区精神文明建设汇报材料
2014/08/17 职场文书
python spilt()分隔字符串的实现示例
2021/05/21 Python