Bootstrap的JavaScript需要在vue 2.5中使用jQuery

Question

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

Answer 1

You shouldn't use JQuery and Vue in the same project. Personally, I recommend https://bootstrap-vue.js.org/ which is a Vue wrapper for Bootstrap and works fine.