vueJ 및 웹 팩과 함께 서드파티 jquery 라이브러리 사용

vueJ 및 웹 팩과 함께 서드파티 jquery 라이브러리 사용

나는 Vuejs에서 부트스트랩-토글을 사용했다.프로젝트 실행 시 "bootstrapToggle is not function" (bootstrapToggle은 함수가 아닙니다)라는 오류가 표시됨

이것은 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>

웹 팩의 장점 중 하나는 모든 파일에서 모듈을 사용할 수 있다는 것입니다.Vue.js에서는 컴포넌트에 대해 설명합니다.컴포넌트에서 jQuery 모듈을 사용하면 해당 컴포넌트에서만 사용할 수 있습니다.웹 팩 설정 파일에 글로벌하게 추가하려면 다음 절차를 따릅니다.

webpack.base.conf.disc

var webpack = require("webpack")

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

간단한 구성 웹 팩 설정 파일.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>

이 접근방식은 CSS, 이미지 및 기타 로더 등 많은 자산을 가진 복잡한 웹 어플리케이션에 적합합니다.Webpack은 큰 이점을 제공합니다.하지만 만약 당신의 앱이라면 작은 웹팩은 오버헤드가 될 것입니다.

사용하는 대신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>

언급URL : https://stackoverflow.com/questions/41503361/using-3rd-party-jquery-library-with-vuejs-and-webpack