vue.js 如何将Quasar添加到现有的Nuxt应用程序?

ki0zmccv  于 2023-01-31  发布在  Vue.js
关注(0)|答案(2)|浏览(241)

我想把Quasar安装到我现有的Nuxt项目中。我已经阅读了quasar docs,他们在安装页面中提到的唯一一件事是他们自己的CLI,没有Nuxt选项。我还遇到了nuxt-quasar模块,但它不再维护了。有人有过这方面的经验吗?

s5a0g9ez

s5a0g9ez1#

如果它兼容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>
zqdjd7g9

zqdjd7g92#

当前答案

⚠️⚠️⚠️⚠️⚠️
不要这样做,你会在未来的道路上开枪打自己的脚,使用适当的工具为正确的目的,并保持它的简单,以便您可以有一些简单的调试,易于维护和性能。
更多关于我的想法的细节在这里(实际上是同一页,只是在一个评论)。
⚠️⚠️⚠️⚠️⚠️

旧答案

您可以遵循这个github问题:https://github.com/NickHurst/nuxt-quasar/issues/15
或者在他们的论坛上问:https://forum.quasar-framework.org/
但看起来Quasar实际上并不是为了在Nuxt内部实现集成,因为它在做自己的事情。
您也可以创建一个Vue应用程序,添加Quasar,然后将其迁移到Nuxt。虽然繁琐,但可行的IMO。但有一件事是肯定的,这不是一个常见的用法,因为这种用例不存在。
你也可以问Bence Szalai:https://github.com/NickHurst/nuxt-quasar/issues/7#issuecomment-683255301
他的微博留言簿是开着的。
最后,你仍然可以尝试Nuxt模块,看看它的进展。也许没有太多的更新项目。或CDN的方式,但是的... CDN。
无论如何,我看不出它的意义,因为它做了几乎什么Nuxt正在做。
如果这是你想要的,你可以通过Vuetify使用这些组件。

相关问题