如何在 Nuxt 中使用 pug 扩展 Vue 组件？

【问题标题】：How to extend a Vue component with pug in Nuxt?如何在 Nuxt 中使用 pug 扩展 Vue 组件？
【发布时间】：2019-11-08 08:34:22
【问题描述】：

我理解 Vue 用 pug 扩展；详细在这里： https://vuejsdevelopers.com/2017/06/11/vue-js-extending-components/

但在 Nuxt 中，我找不到将 pug 模板 extend 或 include 放入子模板的方法。该怎么做？

例如；这不起作用，因为我们在 Nuxt 中没有 SurveyInputBase.pug 文件，它是一个组件；

<template lang="pug">
  include SurveyInputBase.pug
</template>
<script>
  export default {
    props: [ 'question' ]
  }
</script>

【问题讨论】：

标签： vue.js pug extend nuxt.js

【解决方案1】：

你需要上一层，让 webpack/vue-cli 为你做导入。 vue的pug插件其实只是一个快速标记语言工具，并不是pug/express那种全动态页面编译包。

<template lang="pug">
  SurveyInputBase
</template>
<script>
  import SurveyInputBase from '@/components/SurveyInputBase';
  export default {
    components: [SurveyInputBase],
    props: [ 'question' ]
  }
</script>

【讨论】：

非常感谢。我这样做了，但这一次实际上并没有“扩展”。看起来它只像 pug 文件一样导入基本组件。我们能以某种方式将其作为带有模板的真正“基础”组件来实现吗？ SurveyInputBase 的模板和方法等？
是的，阅读 vue.js 组件指南了解更多详细信息。它以这种方式使用常规的 vue.js 语法。