vue.js - 在 Quasar CLI 中使用 lang ="pug"

Question

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

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

这会引发此错误:

Component template requires a root element, rather than just text

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

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

但这假设我所有的哈巴狗文件都在名为 .pug 的文件中，这不是我的偏好。

有没有办法让 lang="pug" 在我的 vue-cli 项目中正常工作？

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

Quasar Framework.. v0.17.20

Answer 1

这应该可以正常工作。我建立了一个新的 quasar 项目，并像这样将 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 创建时创建的默认项目格式。