如何将 Quasar 添加到现有的 Nuxt 应用程序中？

Question

我想将 Quasar 安装到我现有的 Nuxt 项目中。我一直在阅读quasar 文档，他们在安装页面中唯一提到的是他们自己的 CLI，它没有 Nuxt 选项。我也遇到了 nuxt-quasar 模块，但它不再维护了。有没有人有这方面的经验？

Answer 1

如果它与 Vue 兼容，那么它与 Nuxt 兼容。时期。不知道接受的答案是什么，说它很麻烦，这与您对任何其他框架所做的过程相同，基本上与您对例如您所做的相同。验证。当然，Quasar 不是标准的，但它与 Vue 兼容，没有什么特别麻烦或困难的。

这是你在 Nuxt 3 中的做法。Nuxt 2 略有不同，你导入 Vue 是为了

.use

的东西，我为 Nuxt 3 做了更多的未来证明。

来自 https://quasar.dev/start/umd。做他们在那里做的同样的事情，但以 Nuxt 的方式。首先，他们在头脑中获得样式和字体。然后他们得到脚本。然后他们在 Vue 中注册了 Quasar。现在就开始吧！

// plugins/quasar.js
import 'quasar/dist/quasar.prod.css'
import Quasar from 'quasar/dist/quasar.umd.prod';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.use(Quasar, {
        config: {
            // options
        }
    })
})

// nuxt.config.js
{
    plugins: [
        '~/plugins/quasar.js'
    ]
}

完成！现在我们可以这样使用它：

<q-page-container>
  <q-page>
    <h1>Hello World!</h1>
  </q-page>
</q-page-container>

Answer 2

---

当前答案

⚠️⚠️⚠️⚠️⚠️
只是不要那样做，否则你会搬起石头砸自己的脚，为正确的目的使用适当的工具并保持简单，这样你就可以拥有易于调试、易于维护和高性能的东西。
关于我的想法的更多细节在这里（实际上是同一页，只是在评论中）。
⚠️⚠️⚠️⚠️⚠️

---

旧答案

您可以关注此 github 问题：https://github.com/NickHurst/nuxt-quasar/issues/15

在他们的论坛上提问：https://forum.quasar-framework.org/

但看起来 Quasar 实际上并不是为了集成到 Nuxt 内部，因为它在做自己的事情。

您还可以创建一个 Vue 应用程序，添加 Quasar，然后将其迁移到 Nuxt。麻烦但可行的海事组织。但是可以肯定的是，从这个用例的不存在来看，这不是一种常见的用法。

你也可以问 本斯·萨莱：https://github.com/NickHurst/nuxt-quasar/issues/7#issuecomment-683255301
他的推特 DM 是开放的。

最后，大家还是可以试试Nuxt模块，看看效果如何。该项目可能没有太多更新。或者 CDN 方式但是是的......CDN.

---

无论如何，我不明白它的意义，因为它所做的几乎就是 Nuxt 正在做的事情。
如果这是你要找的，你可以通过 Vuetify 使用这些组件。

Answer 3

只需将您的项目移动到 Nuxt-quasar 样板。 从以下位置克隆样板： https://github.com/piscis/nuxt-quasar-boilerplate