Pug的安装与使用

为什么使用pug

使用<>闭合标签，一个标签需要有起码两行代码，而pug则使用一行就行了，省略标签名，使用习惯了，更容易发现代码出现的问题。

pug就是当年的jade，源自于后端，因为现在前端node的发展，前端node能力已有很大的进步，pug里很多语法会用不到，比如配合vue使用。如果用jq这种开发模式，还是可以用到的。

安装与使用

cnpm i pug pug-html-loader pug-plain-loader -D

在vue-cli3.0的vue.config.js中，配置

  module.exports = {
    chainWebpack: config => {
        config.module.rule('pug')
        .test(/\\.pug$/)
        .use('pug-html-loader')
        .loader('pug-html-loader')
        .end()
     }
}

在template声明lang='pug'，配合vscode插件 pug 和 Pug (Jade) snippets 可以实现pug语法的高亮与联想

语法

vue中使用pug语法示例

html语法	pug语法
	.container
	img(:src="url")
显示	span(v-if="isShow") 显示
按钮	.btn(@click="goPage") 按钮
	div(v-for="(item, i) in list" :key="i")
	.tabs(:class="{'fixed':isFixed}")

参考文档

1. Pug 模板引擎中文文档
2. vue脚手架中 pug插件配置