Bootstrap的JavaScript需要在vue 2.5中使用jQuery [英] Bootstrap's JavaScript requires jQuery in vue 2.5

问题描述

您好，我是vue的新手，我已经搜索过google，但没有找到与我的问题相关的任何解决方案.这里是问题的概述，我尝试在vue中创建主页，并且其中包含一些外部脚本.我希望此脚本仅可用于主页.

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

}

这是我的全部剧本

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. Bootstrap的JavaScript之前必须包含jQuery

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

推荐答案

您不应在同一项目中使用JQuery和Vue.就个人而言，我建议 https://bootstrap-vue.js.org/这是一个Vue包装器适用于Bootstrap，效果很好.

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.

这篇关于Bootstrap的JavaScript需要在vue 2.5中使用jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！