如何通过 Webpack 导入和使用 bootstrap-vue答案

【问题标题】：How to import and use bootstrap-vue with Webpack如何通过 Webpack 导入和使用 bootstrap-vue
【发布时间】：2017-06-11 07:13:48
【问题描述】：

我使用vuejs-templates and 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> 元素关联的所有属性属性都会引发错误。

我该如何使用它？

【问题讨论】：

您注意到size 和variant 使用局部变量来确定值吗？您可以使用直接字符串来测试它是否有效。删除它们之前的 : 并在属性中键入一个字符串
我还会检查您拥有哪个版本的 Vue 运行时，如果它是仅编译运行时，您不能使用template，您必须使用渲染函数。你可以试试：render: function(createElement) { return createElement(App); }
谢谢你们！

标签： javascript twitter-bootstrap webpack ecmascript-6 vue.js

【解决方案1】：

您应该在您的应用程序中定义以下 Vue 实例：

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

【讨论】：