vue引入jq

http://blog.csdn.net/Zhooson/article/details/76578735

以前习惯性是引用jQuery，bootstrap。。。库，但是不会引用，怎么办？

npminstallswiper--save-dev (或者 npminstalljquery -D)

1

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

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

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

_initSwiper() {constcontainer =this.$refs.swiper;constconfig = {          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 =newSwiper(container, config);}

2.方法二：main.js 中

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

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

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

letswiperAsync = import('swiper')//引入的swiper.js（node_modules）的方法exportdefault{  data(){return{        colorList: ['red','yellow','gray','pink']      }    },    methods: {      async _initSwiper() {letSwiper = await swiperAsync;//异步加载的constcontainer =this.$refs.swiper;//ref='swiper'constconfig = {//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 =newSwiper(container, config);      },    },    mounted(){this._initSwiper();    }  }/*@import '../assets/styles/swiper.min.css'; !*静态资源的文件*!*/@import'../../node_modules/swiper/dist/css/swiper.min.css';

二 引入的jquery的方法

全局的方法

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

局部的方法：

npm install jquery -D

需要使用的组件中引入

import $ from 'jquery'