Как добавить глобальный объект Buefy в интерфейс командной строки Vue 3

Я использовал библиотеку Buefy css с Vue 3 и фреймворком CLI. Я установил его с помощью npm install и использую без проблем. Так было до тех пор, пока я не захотел использовать функцию dialog.alert. В показанном примере на Buefy говорится, что нужно использовать:

 this.$Buefy.dialog.alert("My Alert Msg");

Это не работает. У меня нет этого. $ Buefy, $ Buefy или Buefy в качестве определенного объекта.

Поэтому я попытался определить Buefy как глобальный объект. В показанном примере Buefy написано следующее:

import Vue from 'vue'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)

В приведенном выше примере не сказано, где это писать, поэтому я попытался записать это в свой файл main.js. Но код в этом файле выглядит не так, как если бы он работал с предложенным кодом. Код в main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import './assets/scss/app.scss'

createApp(App).use(router).mount('#app')

Нет Vue для использования с Vue.use (Buefy). App.use тоже не работает.

Я не понимаю, как реализовать глобальный объект Buefy, который позволит мне использовать функции реализации, такие как диалоговое окно с предупреждением.


javascript vuejs3 vue-cli buefy bulma
person user2728963    schedule 17.09.2020    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Кажется, вы используете метод vue 3 createApp, с этим вы можете сделать это

 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import './assets/scss/app.scss'
 import Buefy from 'buefy'
 import 'buefy/dist/buefy.css'

 const app=createApp(App);
 app.use(router);
 app.use(Buefy);
 app.mount('#app')
person Emmanuel Ogoma    schedule 17.09.2020
comment
При вызове модального окна вы должны просто сделать this.$buefy.dialog.alert("My Alert Msg");. Обратите внимание, что Буэфи не в столице - person Emmanuel Ogoma; 17.09.2020
comment
Эммануэль, спасибо за ответ. Извините за задержку, работал над чем-то другим. Я поместил ваш предложенный код в main.js, в точности так, как вы предложили. Код, вызывающий предупреждение, находится в методе компонента Vue. Когда я npm run serve, я получаю сообщение об ошибке: Cannot read property '$ buefy' of undefined Единственное, что устраняет ошибку, - это rem out //app.use(Buefy) Я предполагаю, что это ошибка Vue 3. - person user2728963; 23.09.2020
comment
Buefy позволяет вам импортировать компоненты по отдельности, а не this.$buefy.dialog.alert просто импортировать их туда, где они вам нужны. import { DialogProgrammatic as Dialog } from 'buefy' Dialog.alert('We can use confirm and prompt methods as well') - person Emmanuel Ogoma; 23.09.2020
comment
Эммануэль, спасибо за вашу помощь. Я попытался импортировать то, что вы предложили, в мой файл main.js. Вы не указали, как сделать Dialog глобальным, поэтому я догадался и добавил строку: app.use (Dialog) также в мой файл main.js. Мое приложение будет работать с этим, в отличие от Vue.use (Buefy), но теперь, когда я напишу это: $ dialog.alert (Don't Do That); в моей функции, которая находится в файле компонента sites.js, я получаю сообщение об ошибке: Cannot read property 'alert' of undefined - person user2728963; 23.09.2020
comment
На данный момент он не будет глобальным, Buefy в настоящее время не полностью совместим с vue 3 - person Emmanuel Ogoma; 23.09.2020