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

Question

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

Answer 1

如果它兼容 Vue，那么它也兼容 Nuxt。时期。不知道公认的答案是说它很麻烦，这与您对任何其他框架所做的过程相同，基本上与您使用 Vuetify 所做的过程相同。当然，对于 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

\n

当前答案

\n

\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f\xe2 \x9a\xa0\xef\xb8\x8f
\n只是不要这样做，你会在路上搬起石头砸自己的脚，为正确的目的使用适当的工具并保持简单，这样你就可以做一些简单的事情调试、易于维护和高性能。
\n关于我的想法的更多细节在这里（实际上是同一页面，只是在评论中）。
\n\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f\xe2\x9a\xa0\xef\xb8\x8f \xe2\x9a\xa0\xef\xb8\x8f

\n\n

旧答案

\n

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

\n

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

\n

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

\n

您还可以创建一个 Vue 应用程序，添加 Quasar，然后将其迁移到 Nuxt。在我看来，虽然麻烦但可行。但有一件事是肯定的，鉴于此用例不存在，这不是常见用法。

\n

您也许还可以询问\nBence Szalai：https://github.com/NickHurst/nuxt-quasar/issues/7#issuecomment-683255301
\n他的 Twitter DM 已开放。

\n

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

\n\n

不管怎样，我不明白它有什么意义，因为它所做的和 Nuxt 所做的差不多。
\n如果您正在寻找的话，您可以通过 Vuetify 使用这些组件。

\n