在 Quasar CLI 中使用 lang="pug"

Question

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

<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 创建时创建的默认项目格式。

Answer 2

在我的例子中，Ben 解决方案不起作用：我想出的是在 quasar.conf.js 文件中按如下方式设置该块：

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

  },

  chainWebpack (chain) {
    chain.module.rule('pug')
      .test(/\.pug$/)
      .use('pug-plain-loader')
        .loader('pug-plain-loader')
  }

有了这个，我只需要在我使用 pug 语法的任何模板中添加属性 lang="pug"。

Ben 的解决方案引发了我对现有 Vue 文件和 js 文件的很多错误。

在 Quasar CLI 中使用 lang="pug"

Using lang="pug" with Quasar CLI

vue.js

pug

vue-cli

quasar-framework