[英]Bootstrap's JavaScript requires jQuery in vue 2.5
大家好,我是vue的新手,我已经搜索过google,但没有找到与我的问题相关的任何解决方案。 这里是问题的概述,我尝试在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。 Bootstrap的JavaScript之前必须包含jQuery
您不应在同一项目中使用JQuery和Vue。 就个人而言,我建议使用https://bootstrap-vue.js.org/ ,它是Bootstrap的Vue包装器,可以正常工作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.