parcel-plugin-vue 插件默认没有实现此功能,需要我们自己写配置。其默认转换工具是 vueify, 根据文档资料,本文记录下实现 pug 支持的基本步骤。

添加配置文件 vue.config.js

在根目录下新建配置文件 vue.config.js,添加pug解析方法,具体如下:

1
2
3
4
5
6
7
8
9
10
11
// vue.config.js
const pug = require('pug')

module.exports = {
customCompilers: {
pug (content, cb) {
const html = pug.render(content)
cb(null, html)
}
}
}

具体配置说明请查看文档.

添加依赖 pug

需要 pug 来解析, 所以添加

1
yarn add pug --dev

使用pug语法

现在就可以在。vue文件中书写pug语法了。

1
2
3
4
<template lang="pug">
h1 parcel vue
</template>
// ...


到此,大功告成!