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 插件。

總結

以上是生活随笔為你收集整理的Pug 模板插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。