如何将 Buefy 全局对象添加到 Vue 3 CLI

Posted 2023-03-16

【中文标题】如何将 Buefy 全局对象添加到 Vue 3 CLI

【英文标题】：How do I add the Buefy global object to Vue 3 CLI

【发布时间】：2021-01-04 04:45:45

【问题描述】：

我一直在使用带有 Vue 3 和 CLI 框架的 Buefy css 库。 我用 npm install 安装了它，并且一直在使用它没有问题。 直到我想使用 dialog.alert 功能。 Buefy 上显示的示例说要使用，

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

这不起作用。我没有 this.$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 对象，该对象将允许我使用诸如警报对话框之类的实现功能。

【参考方案1】：

我好像你在使用 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')  

【讨论】：

调用模态时，你应该只做 this.$buefy.dialog.alert("My Alert Msg"); 。注意 Buefy 不在大写字母中

Emmanuel，感谢您的回答。抱歉耽搁了，正在做其他事情。我把你建议的代码放在 main.js 中，就像你建议的那样。调用警报的代码位于 Vue 组件的方法中。当我 npm run serve 我收到错误：“无法读取未定义的属性 '$buefy'” 清除错误的唯一方法是删除 //app.use(Buefy) 我猜这是 Vue 3 错误。

Buefy 允许您单独导入组件，而不是 this.$buefy.dialog.alert 只需将它们导入您需要的任何地方。 import DialogProgrammatic as Dialog from 'buefy' Dialog.alert('We can use confirm and prompt methods as well')

伊曼纽尔，感谢您的帮助。我尝试将您建议的内容导入到我的 main.js 文件中您没有指定如何使 Dialog 成为全局的，所以我猜测并在我的 main.js 文件中添加了以下行：“app.use(Dialog)”。我的应用程序将与 Vue.use(Buefy) 不同，但现在，当我写“this.$dialog.alert("Don't Do That");”时，我的应用程序将运行它。在“sites.js”组件文件中的函数中，我收到错误消息：“无法读取未定义的属性'警报'”

暂时不会全局，Buefy 目前不完全兼容 vue 3