如何正确的使用最新版本的vue-awesome-swiper？

最近要做一个走马灯形式的效果，是多个卡片式的效果。于是，想到了 vue-awesome-swiper这个插件。这是插件是基于swiper的。

首先，安装插件

npm install swiper vue-awesome-swiper --save
 
# or
yarn add swiper vue-awesome-swiper

全局引入

import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
 
// import style
import 'swiper/css/swiper.css'
 
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)

这时候会发现发错，爆出的错误是

css没有引入

经过查找

css的引入方式是：

import 'swiper/swiper-bundle.css'

最后附上局部使用vue-awesome-swipe的方式：

import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'

// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'

// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'

export default {
  components: {
    Swiper,
    SwiperSlide
  },
  directives: {
    swiper: directive
  }
}

目前所用版本：

vue-awesome-swiper => ^4.1.1

swiper=> ^7.4.1