在 Quasar CLI 中使用 lang="pug"

Question

我已经开始了一个全新的 Quasar CLI 项目，我想以我习惯的方式使用 Pug：在我的lang="pug"一些 .vue 文件中加入一个标签：

<template lang="pug">
  q-page(class="flex flex-center")
    p Well hello there
...

这会引发此错误：

组件模板需要一个根元素，而不仅仅是文本

Quasar给出的建议是添加这个配置：

// quasar.conf.js
build: {
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.pug$/,
      loader: 'pug-plain-loader'
    })
  }
}

但这前提是我所有的 pug 文件都在名为 的文件中.pug，这不是我的偏好。

有没有办法lang="pug"在我的 vue-cli 项目中像往常一样工作？

Quasar CLI........ v0.17.24

Quasar 框架.. v0.17.20

Answer 1

这应该可以正常工作。我已经建立了一个新的类星体项目，并像这样将 pug 添加到 webpack 规则中

extendWebpack (cfg) {
        cfg.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /node_modules/
        })
        cfg.module.rules.push({
          test: /\.pug$/,
          loader: 'pug-plain-loader'
        })
      }

我的 app.vue 看起来像这样

<template lang="pug">
  div(id="q-app")
    router-view
</template>

一切正常。我使用 quasar 1.0 beta 及其使用 CLI 创建时创建的默认项目格式。