引入jquery库（如何在vue中引入第三方jquery，swiper等库）

本文目录

• 如何在vue中引入第三方jquery，swiper等库
• js文件如何引入jquery

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

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

• 方法一：全局引入，也是最暴力的，但是也是有好处坏处（同时加载，但是不能保证同时下载）

• ***隐藏网址***

组件中可以直接使用的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.方法三：局部的引入的，有时只想的单个组件中使用某一个的库，方法如下

• 《section ref="swiper" class="swiper-container"》
•  《div class="swiper-wrapper"》
•     《div class="demo swiper-slide" v-for="item in colorList" :style="`backgroundColor:${item}`"》《/div》
•      《/div》《/section》《script》
•  let swiperAsync = import(’swiper’) //引入的swiper.js（node_modules）的方法
•  export default {
•  data(){      return {
•        colorList:
•      }
•    },
•    methods: {
•      async _initSwiper() {        let Swiper = await swiperAsync; //异步加载的
•        const container = this.$refs.swiper; //ref=’swiper’
•        const config = {  //swiper的参数配置
•          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);
•      },
•    },
•    mounted(){      this._initSwiper();
•    }
•  }《/script》《style lang="scss" scoped》
•  /*@import ’../assets/styles/swiper.min.css’; !*静态资源的文件*!*/
•  @import ’../../node_modules/swiper/dist/css/swiper.min.css’;《/style》12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849

二 引入的jquery的方法

• 全局的方法

• ***隐藏网址***

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

• 局部的方法：

• npm install jquery -D1

需要使用的组件中引入

• import $ from ’jquery’1

js文件如何引入jquery

1.js

其中1.html代码如下：

如要测试还需要加上jquery.js 这个可自行下载

运行后点击按钮效果如图：

下面再附上网上的一些方法：

 1、直接document.write《script language="javascript"》    document.write("《script src=’test.js’》《\/script》");《/script》

2、动态改变已有script的src属性《script src=’’ id="s1"》《/script》《script language="javascript"》    s1.src="test.js"《/script》

3、动态创建script元素《script》    var oHead = document.getElementsByTagName(’HEAD’).item(0);    var oScript= document.createElement("script");    oScript.type = "text/javascript";    oScript.src="test.js";    oHead.appendChild( oScript);《/script》 其实原理就是利用dom动态的引入一个js到文件中来，就能和原有的js通信了。