如何避免在VueJS中重复导入和组件声明

Question

我正在使用Quasar和PWA入门套件，使用VueJS。

我想知道如何在Vue应用程序中的许多页面中使用一组组件。

我似乎需要在每个页面都有一个巨大的导入声明

我尝试在main.js中导入一次，但存在冲突

import Quasar from 'quasar'

因此我无法添加或将其更改为

import {
  Quasar,
  QCard,
  .... etc
 } from 'quasar'

因为{}似乎打破了导入。 也无法导入两次（duplicate import错误）。

为整个应用导入一次组件的方法是什么？ 或者获取Vue对象，以便以另一种方式使用它来导入不同的组件？

Answer 1

注册main.js插件时，您可以导入特定组件以在Quasar文件中全局注册。

例如，您希望能够在应用程序的任何位置使用<q-btn>和<q-icon>组件，您可以这样做：

import Quasar, { QBtn, QIcon } from 'quasar'

Vue.use(Quasar, {
  components: { QBtn, QIcon }
})

Here's the documentation.