vue-cli项目中使用vue-awesome-swiper

在做移动端网页的时候，用mint-ui做轮播图，总是出现卡顿，于是想用swiper插件，搜了一下方法在vue里用这个真的是贼麻烦，然后看到适用于vue的vue-awesome-swiper插件，下面是其使用方法及实例：

1. 安装vue-awesome-swiper：npm install vue-awesome-swiper --save

2.安装less-loader 和 css-loader，这两项是该插件的依赖：

 npm install less less-loader --save

 npm   install css-loader --save

安装好后，修改build\webpack.base.conf.js文件，添加下面代码  { test: /\.less$/,  loader: 'style-loader!css-loader!less-loader'   }

3.在main.js引入 vue-awesome-swiper ：

import VueAwesomeSwiper from 'vue-awesome-swiper'

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

Vue.use(VueAwesomeSwiper)

然后就可以在组件里使用了：比如有个Banner组件，以下是示例：

<template>

<div class="swiperBox">

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

            <swiper-slide class="slides"><img src="static/01.jpg"></swiper-slide>

            <swiper-slide class="slides"><img src="static/02.jpg"></swiper-slide>

            <div class="swiper-pagination" slot="pagination"></div>   <!-------分页---------->

    </swiper>

<div>

</template>

<script >

import { swiper, swiperSlide } from 'vue-awesome-swiper'    //必须引入

export default{

name:'m-banner',

components: { swiper, swiperSlide },   //也是必须的了

data(){

return {

swiperOption: {

notNextTick: true,   // notNextTick设置为true，组件则不会通过NextTick来实例化swiper，就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true

pagination:{    //分页器相关设置都写在这个对象里，刚开始写错了写在外面，怎么点击都不切换- -|||

    el:'.swiper-pagination',

    clickable :true,

},

autoplay: true,

loop:true,         //循环播放

onSlideChangeEnd:swiper=>{           //这里放swiper的回调方法

    this.index = swiper.realIndex;

}

}

}

},

computed:{

swiper(){

return this.$refs.mySwiper.swiper;     // 获取当前的swiper对象，同时notNextTick必须为true

}

},

/* mounted(){            //这里就可以使用swiper对象去调用swiper官网中的方法了

var that = this;

setInterval(function(){     //自动播放 ,不设置这个设置autoplay为true也可以

that.swiper.slideNext() },2000) }      //刚开始弄的时候autoplay不起作用，现在又好了，所以注释了

*/

}

</script>

//现在就可以使用swiper官网里的方法和组件啦， swiper官网http://www.swiper.com.cn/api/autoplay/16.html

//蛋疼的编辑器，我的缩进都没了，不想放截图，html标签还不能粘贴，怎么设置才可以粘贴啊？

<style>

.swiperBox .slides{ height: 200px; } .swiperBox img{ height: 200px; }

<style>

   最后提供一下   vue-awesome-swiper 官方安装地址：https://www.npmjs.com/package/vue-awesome-swiper