Bootstrap's JavaScript requires jQuery in vue 2.5

时间:2018-02-03 07:45:47

标签: javascript php laravel vue.js

Hello guys im new to vue, I have searched google but haven't found any solution related to my problem. Here is an overview of the problem, I try to create home page in vue and in it are some external scripts. I want this script to be available only for home page.

<template>
  <div class="app">
  <HomeHeader />
  <div class="app-body">
  <main class="main">
    <div class="container-fluid">
      <router-view></router-view>
    </div>
  </main>
  </div>
 <HomeFooter/>
</div>
</template>
<script>
import HomeHeader from '../components/HomeHeader'
import HomeFooter from '../components/HomeFooter'
import jquery from 'jquery';
 global.jQuery=jquery;
import  bootstrap  from '../containers/home/js/bootstrap.min.js';
import  popper  from '../containers/home/js/popper.min.js';
import   revolution from '../containers/home/js/extensions/revolution.extension.slideanims.min.js';
import  main  from '../containers/home/js/main.js';
import  all from '../containers/home/js/all.js';

 export default {
   name: 'Homepage1',
  components: {
      HomeHeader,
      HomeFooter,jquery,bootstrap,popper,revolution,main,all,
     },

}

here is my all script

var tpj = jQuery;
var revapi24;
tpj(document).ready(function() {
if (tpj("#rev_slider_main").revolution == undefined) {
    revslider_showDoubleJqueryError("#rev_slider_main");
} else {
  revapi24 = tpj("#rev_slider_main").show().revolution({
  sliderType: "standard",
  jsFileLocation: "revolution/js/",
  sliderLayout: "fullscreen",
  dottedOverlay: "none",
  delay: 9000,
  navigation: {
   keyboardNavigation: "off",
   keyboard_direction: "horizontal",
   mouseScrollNavigation: "off",
   mouseScrollReverse: "default",
   onHoverStop: "off",
    bullets: {
     enable: true,
     hide_onmobile: false,
     style: "bullet-bar",
     hide_onleave: false,
     direction: "horizontal",
     h_align: "center",
     v_align: "bottom",
     h_offset: 0,
     v_offset: 50,
     space: 5,
     tmp: ''
         }
       },
responsiveLevels: [1240, 1024, 778, 480],
visibilityLevels: [1240, 1024, 778, 480],
gridwidth: [1240, 1024, 778, 480],
gridheight: [868, 768, 960, 720],
lazyType: "none",
shadow: 0,
spinner: "off",
stopLoop: "off",
stopAfterLoops: -1,
stopAtSlide: -1,
shuffle: "off",
autoHeight: "off",
fullScreenAutoWidth: "off",
fullScreenAlignForce: "off",
fullScreenOffsetContainer: "",
fullScreenOffset: "60px",
hideThumbsOnMobile: "off",
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
debugMode: false,
fallbacks: {
  simplifyAll: "off",
  nextSlideOnWindowFocus: "off",
  disableFocusListener: false,
            }
     });
  }     

if (revapi24) revapi24.revSliderSlicey();
});

Now my problem is that it throws an error in all script that jQuery is not define. Another error is Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript

1 个答案:

答案 0 :(得分:1)

您不应该在同一个项目中使用JQuery和Vue。就个人而言,我推荐https://bootstrap-vue.js.org/这是Bootstrap的Vue包装器并且工作正常。