Bootstrap 的 JavaScript 在 vue 2.5 中需要 jQuery

Question

大家好，我是 vue 新手，我搜索了谷歌，但没有找到与我的问题相关的任何解决方案。这是问题的概述，我尝试在 vue 中创建主页，其中包含一些外部脚本。我希望此脚本仅可用于主页。

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

}

这是我的全部脚本

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();
});

现在我的问题是它在所有未定义 jQuery 的脚本中引发错误。另一个错误是 Bootstrap 的 JavaScript 需要 jQuery。 jQuery 必须在 Bootstrap 的 JavaScript 之前包含

Answer 1

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