如何在Webpack中导入和使用bootstrap-vue

Question

我开始使用vuejs-templates和webpack启动了一个项目。

之后，我又加入了bootstrap-vue到这个项目中。

现在，我不确定如何添加一个bootstrap按钮。

在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>元素相关的所有属性特性的错误。

我该如何使用它？

- SeanPlusPlus

---

你是否注意到 size 和 variant 使用本地变量来确定值？你可以直接使用字符串进行测试。移除它们前面的冒号并在属性中输入一个字符串。 - AfikDeri

我还会检查您使用的Vue运行时版本，如果它是仅编译运行时，则无法使用“template”，您必须使用“render”函数。 您可以尝试： render: function(createElement) { return createElement(App); } - Justin MacArthur

谢谢你们两个！ - SeanPlusPlus

Answer 1

你应该在你的应用程序中定义Vue实例，如下所示：

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

- Vitaly Mosin