在VUE中使用Swiper轮播图

第一、使用npm下载swiper  npm install vue-awesome-swiper --save

第二、在main.js引用 


main.js
//引入swiper

import VueAwesomeSwiper from 'vue-awesome-swiper'

Vue.use(VueAwesomeSwiper)

使用的时候不知道啥原因css要另外引用才有效果

在vue页面的js中引用 import 'swiper/css/swiper.css'

第三

.swiper1{

  height: 600px;

  width: 600px;

  border: 2px solid red;

}

.swiper1 img{

  height: 100%;

  width: 100%;

}

效果

你可能感兴趣的:(在VUE中使用Swiper轮播图)