如何在沒有 Quasar CLI 的情況下配置 Quasar 插件？

Question

我使用vue add quasar將 Quasar 添加到我預先存在的 Vue CLI 項目中。

現在我正在嘗試使用Loading plugin ，但我無法讓它工作。

這是我與 Quasar/Vue 設置相關的內容：

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  config: {},
  components: { /* not needed if importStrategy is not 'manual' */ },
  directives: { /* not needed if importStrategy is not 'manual' */ },
  plugins: {},
  cssAddon: true,
  extras: [
    'ionicons-v4',
    'material-icons',
    'material-icons-outlined',
    'material-icons-round',
    'material-icons-sharp',
    'mdi-v3',
    'eva-icons',
    'fontawesome-v5',
    'themify'
  ]
})

我嘗試使用以下選項無濟於事。 有任何想法嗎？

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...,
  framework: {
    plugins: [
      'Loading'
    ]
  },
  ...
})

和

import { Quasar } from 'quasar'

Vue.use(Quasar, {
  ...
  plugins: ['Loading'],
  ...
})

Answer 1

由於我沒有使用 quasar-cli 將 Quasar 添加到我的應用程序中，因此我不得不對插件進行全局調用。 這就是我最終做的事情，這與@Alex Brohshtut 在他的評論中建議的內容相同。

main.ts

import { Loading } from 'quasar';

http.interceptors.request.use(config => {
  Loading.show({
    delay: 500,
    message: 'Please wait...'
  });
  return config
})

http.interceptors.response.use(response => {
  Loading.hide();
  return response
})

Answer 2

在 quasar 中的“Using Vue”文檔的幫助下，我讓它在類似的 vue-cli 設置中與 Vue 3 和 Quasar 2 一起工作。

quasar-user-options.js

import './styles/quasar.sass'
import { Notify } from 'quasar'

// To be used on app.use(Quasar, { ... })
export default {
  config: {
  },
  plugins: [Notify]
}

在main.js它的用法如下：

import { createApp } from 'vue'
import App from './App.vue'
import { Quasar } from 'quasar'
import quasarUserOptions from './quasar-user-options'
import router from './router'

createApp(App).use(router).use(Quasar, quasarUserOptions).mount('#app')

我認為在您的設置中，當您將插件添加到插件配置時，您並沒有導入插件。