vue中引入awesomeswiper的方法以及编写轮播组件

1、先安装less-loader

npm install less less-loader --save

2、再安装css-loader

npm install css-loader --save

3、安装上面两个之后、再安装vue-awesome-swiper（必须在前两个安装过之后安装）

npm install vue-awesome-swiper --save

4、安装完之后在package.json文件中查看一下，看是否安装上，如果安装成功，里面会显示对应的版本号

"less": "^3.8.1",

"less-loader": "^4.1.0",

"css-loader": "^0.28.11",

"vue-awesome-swiper": "^3.1.3",

5、在main.js中引入

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/dist/css/swiper.css'

Vue.use(VueAwesomeSwiper)

6、修改build\webpack.base.conf.js文件，添加下面代码

{

test: /\.less$/,

loader: 'style-loader!css-loader!less-loader'

}

7、之后就可以编写轮播组件什么的。。。送佛送到西，（轮播）组件附上：

<template>

    <div class="swiperBox">

           <swiper :options="swiperOption" ref="mySwiper">

                   <!-- 这部分放置需要渲染的内容 -->

                   <swiper-slide><div class="page">1</div></swiper-slide>

                   <swiper-slide><div class="page">2</div></swiper-slide>

                   <swiper-slide><div class="page">3</div></swiper-slide>

                   <swiper-slide><div class="page">4</div></swiper-slide>

                   <div class="swiper-pagination" slot="pagination"></div>

           </swiper>

     </div>

</template>

 

 

<script>

　　import { swiper,swiperSlide } from 'vue-awesome-swiper'

　　export default{

　　　　components:{

　　　　　　swiper,

　　　　　　swiperSlide

　　　　},

　　　　data(){

　　　　　　return {

　　　　　　　　swiperOption:{

　　　　　　　　notNextTick:true,

　　　　　　　　pagination:{

　　　　　　　　　　el:'.swiper-pagination'

　　　　　　　　},

　　　　　　　　loop:true,

　　　　　　　　disableOnInteraction:true,

　　　　　　　　autoplay:2000,

　　　　　　　　slidesPerView:'auto',

　　　　　　　　centeredSlides:true,

　　　　　　　　paginationClickable:true,

　　　　　　　　spaceBetween:30,

　　　　　　　　onSlideChangeEnd:swiper => {

　　　　　　　　　　//这个位置放置swiper的回调方法

　　　　　　　　　　this.page = swiper.realIndex+1;

　　　　　　　　　　this.index = swiper.realIndex;

　　　　　　　　}

　　　　　　}

　　　　}

　　},

　　computed:{

　　　　//定义这个swiper对象

　　　　swiper(){

　　　　　　return this.$refs.mySwiper.swiper;

　　　　}

　　},

　　mounted() {

　　　　//这边就可以使用swiper这个对象或使用swiper官网中的方法

　　　　var that=this;

　　　　this.swiper.slideTo(0,0,false);

　　　　//自动播放

　　　　setInterval(function(){

　　　　　　that.swiper.slideNext()

　　　　},2000)

　　},

}

</script>

 

<style scoped>

　　.swiperBox{

　　　　width:100%;

　　　　height:300px;

　　}

　　.page{

　　　　width:100%;

　　　　height:300px;

　　　　background:pink;

　　}

</style>