How can vue use swiper to report these three errors?

introduced in this way in the entry file
import Swiper from "swiper"
import "swiper/dist/css/swiper.min.css"
<div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(items, index2) in item.pic" :key=index2>
            <img :src="items">
          </div>
        </div>
</div>
mounted () {
    new Swiper(".swiper-container", {
      autoplay: false,
      loop: true
    })
  }

"Swiper" is not defined I have already introduced plug-ins in the entry file. Why do I prompt undefied when I use them in components?

Do not use "new" for side effects
I can"t add / * eslint-disable no-new * / to the entry file

"Swiper" is defined but never used after I write Vue.use (Swiper) in the entry file, the component will not show anything. How can I solve these three problems
?

Apr.01,2022

The

building uses the native swpier plug-in instead of the vue-awesome-swiper encapsulated by the vue plug-in syntax. Therefore, you can't quote it in the entry file. It needs to be referenced where the specific page is used. In addition, in the entry file, under the global declaration, such as window.Swiper = Swiper; , you can use const swiper = new window.Swiper (...) when using the specific page.

< hr >

problem: error: Do not use 'new' for side effects (no-new)
the solution is as follows:

/* eslint-disable no-new */
new window.Swiper('.swiper-container', {
  autoplay: false,
  loop: true,
});
Menu