How to introduce Awesomeswiper in Vue and write the Carousel component

1, first install Less-loader

NPM Install less Less-loader--save

2, re-install Css-loader

NPM Install Css-loader--save

3, install the above two after the installation of Vue-awesome-swiper (must be installed after the first two installed)

NPM Install Vue-awesome-swiper--save

4, after the installation in the Package.json file to check, see if the installation, if the installation is successful, it will show the corresponding version number

"Less": "^3.8.1", "Less-loader": "^4.1.0", "Css-loader": "^0.28.11", "Vue-awesome-swiper": "^3.1.3", 5, introduced in Main.js

Import vueawesomeswiper from ' Vue-awesome-swiper '

Import ' Swiper/dist/css/swiper.css '

Vue.use (Vueawesomeswiper)

6, modify the Build\webpack.base.conf.js file, add the following code

{

Test:/\.less$/,

Loader: ' Style-loader!css-loader!less-loader '

}

7. After that, you can write a carousel component or something ... Send Buddha to West, (carousel) components are attached:

<template>    <div class= "Swiperbox" >           <swiper:options = "Swiperoption" ref= "Myswiper" >                 !--This section places the required rendering Content-->                   <swiper-slide><div class= "page" ;1</div></swiper-slide>                   < Swiper-slide><div class= "page" >2</div></swiper-slide>            & nbsp      <swiper-slide><div class= "page" >3</div></swiper-slide>                   <swiper-slide><div class= "page" >4</div></ swiper-slide>                   <div class= "Swiper-pagination" SL ot= "pagination" ></div>           </swiper>     </div></template>  <script> Import { Swiper,swiperslide} from ' Vue-awesome-swiper ' export default{components:{swiper, swiperslide}, DAT　　　　　　　　A () {return {swiperoption:{notnexttick:true, pagination:{el: '. Swiper-pagination ' }, Loop:true, Disableoninteraction:true, autoplay:2000, Slidesperview: ' Auto ', cente Redslides:true, Paginationclickable:true, spacebetween:30, onslidechangeend:swiper = {/　　　　　　　　　　/This position is placed Swiper callback method this.page = swiper.realindex+1;　　　　　　　　This.index = Swiper.realindex;　　　　}}}, computed:{//define this Swiper object Swiper () {return this. $refs. Myswiper.swiper;　　　　}}, mounted () {///This side can be used swiper this object or use the method of Swiper official website var that=this;　　　　This.swiper.slideTo (0,0,false); AutoPlay setinterval (function () {that.swiper.slideNext ()},2000)　　},}</script> <style scoped>. swiperbox{width:100%;　　height:300px;　　　　}. page{width:100%;　　　　height:300px;　　Background:pink; }</style>

How to introduce Awesomeswiper in Vue and write the Carousel component