Vue2.0配置pug模板引擎

简介

pug，原名jade，是流行的HTML模板引擎，它是HAML在JavaScript上的实现，最大的特色是使用缩进排列替代成对标签。
它简化了HTML的成对标签的写法，使代码更加简洁、开发效率更高，但是同时它也带来了一些副作用：可移植性差、调试困难、性能并不出色。

配置

• 安装pug和jade依赖

安装支持pug依赖

npm install pug pug-loader pug-filters -D

安装支持jade依赖

npm install jade jade-loader -D

• 配置
  打开webpack.base.conf，在module的rules节点下添加如下配置：

{
      test: /\.jade$/,
      loader: "jade" 
},
{
      test: /\.pug$/,
      loader: 'pug' 
},

这样我们的.vue文件就支持pug的语法了。

• 测试
  修改App.vue

<template lang="pug">
  div#app
    img(src="./assets/logo.png")
    router-view
    el-row
      el-button 默认按钮
      el-button(type="primary") 主要按钮
</template>