一、先安裝less-loadercss
npm install less less-loader --savevue
二、再安裝css-loaderwebpack
npm install css-loader --saveweb
三、安裝上面兩個以後、再安裝vue-awesome-swiper（必須在前兩個安裝過以後安裝）npm
npm install vue-awesome-swiper --savejson
四、安裝完以後在package.json文件中查看一下，看是否安裝上，若是安裝成功，裏面會顯示對應的版本號less
"less": "^3.8.1",
"less-loader": "^4.1.0",
"css-loader": "^0.28.11",
"vue-awesome-swiper": "^3.1.3",
五、在main.js中引入
import VueAwesomeSwiper from 'vue-awesome-swiper'ide
import 'swiper/dist/css/swiper.css'oop
Vue.use(VueAwesomeSwiper)ui
六、修改build\webpack.base.conf.js文件，添加下面代碼
{
test: /\.less$/,
loader: 'style-loader!css-loader!less-loader'
}
七、以後就能夠編寫輪播組件什麼的。。。送佛送到西，（輪播）組件附上：
<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>