Question

我在Vuejs中使用了bootstrap-toggle。运行项目时出现错误＆＃34; bootstrapToggle不是函数＆＃34;

这是我的VueJs组件看起来像

<template>
  <input type='checkbox' id="toggle-checked" v-model="active">
</template>
<script type="text/babel">
  import $ from 'jquery'
  require('bootstrap-toggle')

  export default {
    data () {
      return {
        active: 1
      }
    },
    mounted: function () {
      $('#toggle-checked').bootstrapToggle()
    }
  }
</script>

Answer 1

webpack的一个好处是您可以在所有文件中使用模块。在Vue.js中我们谈论组件。所以你所做的就是在你的组件中使用jQuery模块，它只在那个组件中可用。要使其全局添加到您的webpack配置文件：

webpack.base.conf.js

var webpack = require("webpack")

module.exports = {
  plugins : [
        new webpack.ProvidePlugin({
            $ : "jquery",
            jQuery : "jquery"
        })
  ],
};

简单配置webpack config file。现在，jQuery将在所有组件中可用，现在组件看起来更清晰：

Vue组件

<template>
   <input type='checkbox' id="toggle-checked" v-model="active">
</template>
<script type="text/babel">

      require('bootstrap-toggle')

      export default {
        data () {
          return {
            active: 1
          }
        },
        mounted: function () {
          $('#toggle-checked').bootstrapToggle()
        }
      }
</script>

这种方法适用于具有许多资产的复杂Web应用程序，例如CSS，图像和其他加载器，而Webpack将为您带来很多好处。但是，如果你的应用程序是小的Webpack将是开销。

Answer 2

您可以在require中添加以下行，而不是bootstrap-toggle index.html，这可以解决此问题。

<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>

使用第三方jquery库与vueJS和webpack

2 个答案:

webpack.base.conf.js

Vue组件