[Hot] Vue-cli 引入VueAwesomeSwiper

Vue脚手架引入Swiper最新实操步骤:

//npm
npm install vue-awesome-swiper --save

//可以全局 or 局部引用
全局:

//main.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import './swiper4/swiper.css' //这个css要去官网下载然后放进项目引入
Vue.use(VueAwesomeSwiper)

局部:

// *.vue
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import './swiper4/swiper.css'
//

提示
新版的VueAwesomeSwiper是从Swiper4改写的,
api写法有变化,老版本的写法会引起组件失效
比如autoplay,pagination,prevButton,nextButton等属性

在新版的api文档中新增了组件选项,使用新写法就可以正常使用了
查看新版api文档

1.png

点个赞就成功啦哈!