如何使用Webpack導入和使用bootstrap-vue

Question

我使用vuejs-templates和webpack開始了一個項目。

然后我將bootstrap-vue添加到項目中。

現在，我不確定如何添加引導按鈕。

在main.js我導入BootstrapVue ：

import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
import App from './App'

Vue.use(BootstrapVue)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})

但是，當我嘗試在App.vue使用<b-button>元素時：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <b-button :size="size" :variant="variant" @click="clicked">
      Click Me!
    </b-button>
    <hello></hello>
  </div>
</template>

拋出與<b-button>元素關聯的所有屬性屬性的錯誤。

我該如何使用它？

Answer 1

您應該在您的應用Vue實例中定義以下內容：

data:{
    size: 0, //needed size 
    variant: 'success' // needed variant
},
methods:{
    clicked(){
        console.log('im clicked')
    }
}