如何在vue中引入第三方jquery,swiper等库

2024-11-20 04:33:02
推荐回答(1个)
回答1:

一 .引入swiper(全局,局部)

  • 方法一:全局引入,也是最暴力的,但是也是有好处坏处(同时加载,但是不能保证同时下载)

  • 12

  • 组件中可以直接使用的swiper了

  • _initSwiper() {        const container = this.$refs.swiper;        const config = {

  •          effect: 'coverflow',

  •          slidesPerView: 'auto',

  •          centeredSlides: true,

  •          initialSlide: this.activeIndex,

  •          loop: true,

  •          autoplay: 1000,

  •          speed: 1000,

  •          coverflow: {

  •            rotate: 0,

  •            stretch: -30,

  •            depth: 100,

  •            modifier: 0.7,

  •            slideShadows: false,

  •          },

  •        };    this.mySwiper = new Swiper(container, config);

  • }1234567891011121314151617181920

  • 2.方法二:main.js 中

  • import '../node_modules/swiper/dist/css/swiper.min.css';import 'swiper';12

  • 执行上面的_initSwiper()的方法 即可

    3.方法三:局部的引入的,有时只想的单个组件中使用某一个的库,方法如下


  •  

  •    

  •      
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

二 引入的jquery的方法

  • 全局的方法

  • 1

  • 组件中可以直接使用的 ‘$’的方法

  • 局部的方法:

  • npm install jquery -D1

  • 需要使用的组件中引入

  • import $ from 'jquery'1

  • 相关问答