源自：http://blog.csdn.net/susuzhe123/article/details/69525609
步驟一：安裝vue，??
???????????$?npm?install?vue??
步驟二：創(chuàng)建vue項(xiàng)目??
??????????#?全局安裝?vue-cli??
??????????$?npm?install?-g?vue-cli??
??????????$?cd?my-project??
??????????$?npm?install??
??????????$?npm?run?dev??
上面這些就是安裝好vue項(xiàng)目，最主要的就是下面的步驟
[html]?view plain?copy
步驟三：下載好swiper相關(guān)的js和css，js放在static目錄下，css放在assets目錄下。??
[html]?view plain?copy
步驟四：??
安裝runtime：??
終端命令：npm?install?babel-runtime??
[html]?view plain?copy
步驟五：??
修改.eslintrc.js文件如下：??
//?http://eslint.org/docs/user-guide/configuring??
module.exports?=?{??
??root:?true,??
??parser:?'babel-eslint',??
??parserOptions:?{??
????sourceType:?'module'??
??},??
??env:?{??
????browser:?true,??
??},??
??//?https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style??
??extends:?'standard',??
??//?required?to?lint?*.vue?files??
??plugins:?[??
????'html'??
??],??
??//?add?your?custom?rules?here??
??'rules':?{??
????//?allow?paren-less?arrow?functions??
????'arrow-parens':?0,??
????//?allow?async-await??
????'generator-star-spacing':?0,??
????//?allow?debugger?during?development??
'no-debugger':process.env.NODE_ENV?===?'production'???2?:?0??
??},??
??'globals':?{??
????"Swiper":?true??
??}???//這個(gè)地方是新加入的???全局注入??
}??
[html]?view plain?copy
步驟六：在自己的vue文件中添加輪播圖代碼??
[html]?view plain?copy
[javascript]?view plain?copy
import?Swiper?from?'../../static/swiper-3.4.2.min.js'??
let?galleryTop??
let?galleryThumbs??
export?default?{??
name:'main',??
??data?()?{??
return?{??
??????lbt:?[??
????????{??
'imgs':?'../static/product/lbt1.jpg'??
????????},?{??
'imgs':?'../static/product/lbt2.jpg'??
????????},?{??
'imgs':?'../static/product/lbt3.jpg'??
????????}??
??????]??
????}??
??},??
??mounted?()?{??
this.lunbo()??
??},??
??methods:?{??
????lunbo?()?{??
galleryTop?=new?Swiper('.gallery-top',?{??
nextButton:'.swiper-button-next',??
prevButton:'.swiper-button-prev',??
????????spaceBetween:?10,??
grabCursor:true,??
????????initialSlide:?1,??
autoplayDisableOnInteraction:false??
??????})??
galleryThumbs?=new?Swiper('.gallery-thumbs',?{??
????????spaceBetween:?10,??
????????autoplay:?4000,??
????????initialSlide:?1,??
centeredSlides:true,??
slidesPerView:'auto',??
????????touchRatio:?0.2,??
slideToClickedSlide:true,??
autoplayDisableOnInteraction:false,??
grabCursor:true??
??????})??
??????galleryTop.params.control?=?galleryThumbs??
??????galleryThumbs.params.control?=?galleryTop??
????},??
????stopPlay?()?{??
??????galleryTop.stopAutoplay()??
??????galleryThumbs.stopAutoplay()??
????},??
????play?()?{??
??????galleryTop.startAutoplay()??
??????galleryThumbs.startAutoplay()??
????}??
??}??
}??
[css]?view plain?copy
@import?url("../assets/swiper-3.4.2.min.css");??
.gallery-top{????
height:32rem;????
width:100%;??
}????
.gallery-thumbs{????
height:20%;????
????box-sizing:border-box;????
padding:10px?0;????
background:?rgba(0,?0,?0,?0.4);??
cursor:?pointer;??
}????
.gallery-thumbs?.swiper-slide{????
width:30%;????
height:6rem;????
opacity:0.3;????
}????
.gallery-thumbs?.swiper-slide-active{????
opacity:1;???
}???
.swiper-slide{??
background-size:?100%?160%;??
-webkit-background-size:?100%?160%;??
}??
這里還有一個(gè)很重要的問題，在模板里面設(shè)置背景圖，寫法應(yīng)該是
[html]?view plain?copy
v-bind:style="{backgroundImage:?'url('?+?value.imgs?+?')'}"??
