swiper6填坑：vue-awesome-swiper

1.安装swiper要引入css

首先安装vue-awesome-swiper和wiper，如果使用的是vue-awesome-swiper4+，那么安装时一定要一起安装：

yarn add swiper vue-awesome-swiper
或者
npm i swiper vue-awesome-swiper -S

在使用到swiper的组件中引入Swiper, SwiperSlide

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

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

根据官网使用swiper并未在文档所说的目录下发现对应的css文件，查看github发现，swiper6的css变了位置。在main.js中引入css：

import 'swiper/swiper-bundle.css'

照理说到目前已经可以成功使用swiper了，可是swiper已经有效果了，但是控制台却报了一个错，swiper not defined!
我方了，怎么回事，界面上的swiper切换如丝般顺滑，为什么还是会报错呢？仔细看错误提示，发现了问题所在。

2.err swiper not defined

在项目中使用了vue-awesome-swiper，在已引用的情况下报错："
Error in mounted hook: “ReferenceError: Swiper is not defined”，
仔细查看错误提示，“ at src/components/card/cardLayout.vue”，发现错误位于cardLayout中，但是cardLayout中并未使用到swiper。
以下是我cardLayout.vue文件：

<template>
  <div class="card-layout" :style="{'background-image': `linear-gradient(to bottom, ${color}, #fff 90%)`}">
    <div class="header">
      <div class="title">{{title}}</div>
      <div class="all-btn" @click="showAll">全部</div>
    </div>
    <slot></slot>
    </div>
</template>

businessCard.vue中使用cardLayout.vue，并将swiper插入其中：

<template>
  <div class="com-business">
    <card-layout
      title="可选业务"
      :color="color"
    >
      <Swiper :options="swiperOption">
          <Swiper-slide class="business-item" v-for="item in goodsList" :key="item.id">
            <business-card  :goods="item"></business-card>
          </Swiper-slide>
      </Swiper>
    </card-layout>
    <div class="result-wrapper">
    </div>
  </div>
</template>

在这样的情况下，businessCard（下面简称card）在其生命周期中，在beforeMount的时候开始cardLayout(下面简称layout)组件的初始化和swiper的初始化，在cardLayout初始化的时候，swiper组件尚未完成初始化，因此报错swiper未定义，解决办法：在layout中引入swiper，这样在layout的生命周期beforeMount的时候初始化swiper，那么在layout组件的mounted生命周期时已经有了swiper，错误完美解决