在vue中引入swiper组件步骤

1、下载swiper

npm i --save swiper

报ERR！错误了，就这样下载：

npm i --save swiper --legacy-peer-deps

下载完在package.json文件中检查，下载成功会出现版本号。

2、重启项目

npm run serve

3、引入swiper的js、css文件

import Swiper from 'swiper/bundle'
import 'swiper/swiper-bundle.css'

4、swiper使用

<template>
  <div class="swiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template>
<script>
// 引入swiper中的js、css
import Swiper from 'swiper/swiper-bundle'
import 'swiper/swiper-bundle.css'
export default {
  mounted () {
    new Swiper('.swiper', {
      loop: true // 循环模式选项

    })
  }
}
</script>

在vue中swiper组件要封装一个单独的vue文件，然后引入到父组件中去使用

如果在因为swiper文件时出现报错信息：

Module not found: Error: Package path ./swiper.css is not exported from package C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper (see exports field in C:\Users\yoyang\Desktop\vue\test2022\node_modules\swiper\package.json)

请参考文章：

Vue引入swiper.css报错（已解决）_Yooyangmm的博客-CSDN博客_module not found: error: package path ./css/swiper