第一步安装依赖文件
npm i swiper@5 --save
npm i vue-awesome-swiper@3 --save
第二步 全局安装swiper
在main.js里面操作：
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
/* 使用Vue.use来注册一个轮播图插件 */
Vue.use(VueAwesomeSwiper)
第三步 在自己建好的swiper组件中
<div id="app">
<swiper ref="mySwiper" :options="swiperOptions">
<swiper-slide> Slide 1 </swiper-slide>
<swiper-slide> Slide 2 </swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
<swiper-slide>Slide 4</swiper-slide>
<swiper-slide>Slide 5</swiper-slide>
<div class="swiper-pagination" slot="pagination"></div>
</swiper>
</div>
data() {
return {
swiperOptions: {
pagination: {
el: ".swiper-pagination",
},
},
};
},
computed: {
swiper() {
return this.refs.mySwiper.swiper;
},
}
