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
