Pug 模板插件

Pug 模板引擎中文文档
Pug support

一、vue 中安装使用 pug

1、vue2 中安装使用 pug

要一起安装 pug 和 pug-plain-loader（用于解析 pug）。

npm i -D pug pug-plain-loader

在 webpack 的 module 的 rules 里增加配置：

{
    test: /.pug$/,
    loader: 'pug'
}

2、vue3 中安装使用 pug

只需直接安装 pug 就可以了：

npm install pug --save-dev

然后像下面这样写应该能正常工作：

<template lang="pug">
div test
</template>

【注意】

• pug 不允许前导空格，因为它是基于缩进的。
• Vue 3 SFC 不取消缩进 内容。

二、react 中使用 pug 语法

这或许会比较杂乱，请慎用。

方法一：webpack 中可以使用 pug-as-jsx-loader 插件。

方法二：使用 babel-plugin-transform-react-pug 插件。