使用pug(jade),以及在vue+webpack中使用pug(jade)

一:在HTML中使用pug

在css中有预处理器less和scss来使我们的样式表更加的简介,那么在HTML中有没有这样的格式呢,答案是有的,那就是pug(前身是jade),效果如下:

转译以后

好,看步骤:

第一步:安装pug:

#安装支持pug依赖
npm install -g pug pug-loader pug-filters pug-cli

  这个地方务必使用全局安装,否则会出现“'pug' 不是内部或外部命令,也不是可运行的程序“

第二步:了解pug的语法:

具体大家可以去看一下这个官方文档:https://pug.bootcss.com/language/includes.html,有不会的可以大家交流一下下

第三部:转译成html:

pug xxx.pug

 在命令行是执行这一行代码即可转译成HTML的代码

二:在vue+webpack中使用

第一步:安装,不赘述,与上面第一步同;

第二步,在webpack.base.config.js里面进行配置:

把这三段代码加进来:

{
  test: /.scss$/,
  loader: 'style!css!sass?sourceMap'
},
{
  test: /.jade$/,
  loader: "jade"
},
{
  test: /.pug$/,
  loader: 'pug'
},

 第三步:在vue中使用pug:

我们只需要在template标签里面加入lang=“pug”即可使用pug的语法

原文地址:https://www.cnblogs.com/mmykdbc/p/8056766.html