将第三方jquery库与vueJS和webpack一起使用

我在Vuejs中使用过。运行该项目时，我遇到一个错误“bootstraptogle不是一个函数”

这是我的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>

从“jquery”导入$
需要（'bootstrap-toggle'）
导出默认值{
数据（）{
返回{
现行：1
}
},
挂载：函数（）{
$（“#切换已选中”）.bootstrapToggle（）
}
}

您可以在

index.html

中添加以下行，而不是为

引导切换使用
require
，这将解决此问题

<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>

网页包的优点之一是，您可以在所有文件中使用该模块。在Vue.js中，我们讨论组件。所以您所做的是在您的组件中使用jQuery模块，它将仅在该组件中可用。要使其成为全局的，请将其添加到您的网页包配置文件中：

webpack.base.conf.js
简单的配置。现在jQuery将在您的所有组件中都可用，现在组件看起来更干净：

Vue组件

需要（'bootstrap-toggle'）
导出默认值{
数据（）{
返回{
现行：1
}
},
挂载：函数（）{
$（“#切换已选中”）.bootstrapToggle（）
}
}

这种方法适用于具有许多资产（如CSS、图像和其他加载程序）的复杂web应用程序，Webpack将为您带来巨大的好处。但是如果是你的应用程序，那么小的Webpack将是开销。
编辑
Webpack.base.conf.js
文件后，我得到了
$
未定义。你是通过npm安装jquery的吗？添加“window.jquery”：“jquery”添加到您的ProvidePlugin要看起来像这样，您是否在index.html文件中包含bootstrap-toggle.min.css->
，并最终在nextTick中添加了它。$nextTick（function（）{$（'.#toggle checked'）.bootstraptogle（））；
var webpack = require("webpack")

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

<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>