使用Buefy时未知的自定义元素:x

Question

我遵循Buefy的指导方针

npm install Buefy

在main.ts中

import Vue from 'vue';

import Buefy from 'buefy';

import axios from 'axios';
import VueAxios from 'vue-axios';

import 'buefy/dist/buefy.css';

import App from './App.vue';
import router from './router';
import store from './store';

Vue.config.productionTip = false;

Vue.use(VueAxios, axios, Buefy);

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

在Home.vue (视图)中

<section>
    <b-button @click="clickMe">
       Click Me
    </b-button>
</section>

然后，当我运行时，我得到这个错误

Unknown custom element: <b-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Home> at src/views/Home.vue
       <App> at src/App.vue
         <Root>

我认为Vue.use(Buefy)加载了所有组件？

要使Buefy正常工作，我还缺少什么？

Answer 1

您可以从Vue实例Vue.use()中删除axios，因为axios还不是一个插件。您可以对其使用运算符，而不是全局访问它。

import Axios from 'axios'
Vue.prototype.$http = Axios;

现在，您将能够使用this.$http.post("https://api.com").then().catch()进行访问请注意，use接受第一个参数，您应该使用多个Vue.use()来使插件正常工作

Answer 2

我必须在我的tests/setup.js中包含以下几行代码，以便在测试设置期间注册组件。

import Buefy from 'buefy';
Vue.use(Buefy)

我的main.js不是为测试执行的。

我刚开始用jest进行测试，所以这可能是一个怪物，而且有更好的方法来做。但这对我很管用。