跳到主要内容

parcel-vue环境下pug支持实践

· 阅读需 1 分钟

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

添加配置文件 vue.config.js​

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

// vue.config.js
const pug = require('pug')

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

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

添加依赖 pug​

需要 pug 来解析, 所以添加

yarn add pug --dev

使用pug语法​

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

<template lang="pug">
  h1 parcel vue
</template>
// ...

-- 到此，大功告成！