现在用新插件前有了个概念，一定要看它官方文档，因为不你项目版本与你想用的插件版本间是有规定的，不应该直接看别人已经实现就跟着哐哐下载然后不停报错。。。

比如Swiper版本问题的大小写问题：

@3.x 版本的 ---- 引入模块时使用小写
import { swiper, swiperSlide } from “vue-awesome-swiper”;
@4.x 版本的 ---- 引入模块时使用大写
import { Swiper, SwiperSlide } from “vue-awesome-swiper”;

Swiper相较于elemntPlus组件里的Carousel 走马灯：
①它也可以pc端轮播；
②最主要我是因为它的.el-carousel__container也就是轮播图的高度是固定300px，当我给它外层套div后必须给个固定高度然后击穿原本样式它才显示出来（有时候会击穿不了卡住）；如果它的父元素没固定高度是由内容展开、如果它父元素高度是通过百分比等就必须改成固定高度它才显示轮播图，我不知道是我思路问题还是咋，换条赛道看看@@

/*轮播图的大小*/
/deep/ .el-carousel__container {
	height: 100%;
}

Swiper：

①GitHub官网（里面有对应Vue版本案例Examples，有轮播基础框架图有代码）


②Swiper中文网（里面有交流帖子附带免费且好看的案例）
看官网里的帖子感觉用swiper3比较多；

注意：想下载的话，免费资源有些会被隐藏，这个得注册登录回贴后，返回楼主即可看到下载地址。

了解之后，具体如下：

如果已经出错了就把package.json 里"dependencies"或者"devDependencies"里出现的swiper删除，然后删除node_modules，保险重新npm install再来开始安装swiper；
（1）Vue版本：首先得确认你使用的Vue版本，如果用的是 Vue CLI 创建的项目，可以在项目的根目录中找到 package.json 文件。在该文件中，可以查找 “vue” 的依赖项，并查看其版本号。例如：

"dependencies": {
  "vue": "^3.2.13"
}

（2）安装插件（Vue3）：
①安装插件：这默认安装是最新版的"swiper": "^11.1.1"；

npm i swiper
npm install

②main.js引入swiper样式（略过，因为我发现我想要的样式案例里有copy去了，它没配main.js）：

官网代码：

<template>
  <swiper
    class="swiper"
    :modules="modules"
    :slides-per-view="3"
    :grid="{ rows: 2 }"
    :space-between="30"
    :pagination="{ clickable: true }"
  >
    <swiper-slide class="slide">Slide 1</swiper-slide>
    <swiper-slide class="slide">Slide 2</swiper-slide>
    <swiper-slide class="slide">Slide 3</swiper-slide>
    <swiper-slide class="slide">Slide 4</swiper-slide>
    <swiper-slide class="slide">Slide 5</swiper-slide>
    <swiper-slide class="slide">Slide 6</swiper-slide>
    <swiper-slide class="slide">Slide 7</swiper-slide>
    <swiper-slide class="slide">Slide 8</swiper-slide>
    <swiper-slide class="slide">Slide 9</swiper-slide>
    <swiper-slide class="slide">Slide 10</swiper-slide>
  </swiper>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import { Pagination, Grid } from 'swiper/modules'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import 'swiper/css'
  import 'swiper/css/grid'
  import 'swiper/css/pagination'

  export default defineComponent({
    name: 'swiper-example-slides-per-column',
    title: 'Multi row slides layout',
    url: import.meta.url,
    components: {
      Swiper,
      SwiperSlide
    },
    setup() {
      return {
        modules: [Pagination, Grid]
      }
    }
  })
</script>

<style lang="scss" scoped>
  @import '@/styles/variables.scss';
  @import '@/styles/mixins.scss';
  @import './style.scss';

  .swiper {
    @include swiper-wrapper($height: 430px);
  }

  .slide {
    @include swiper-slide();
    height: 200px;
  }
</style>

为什么想引入main.js：因为在项目里要多处使用轮播，则直接在入口文件即main.js中引入swiper样式即可，后面文章再写，最终我要一个页面多处轮播而且每个轮播都不同样式
之前在main.js引入方式这里也踩雷了不知道引入哪种，例如：

 import 'swiper/dist/css/swiper.css';

或者

import "swiper/swiper.min.css";

或者如果不在main.js里引入的话，就需要每次在要用的页面引入swiper还有样式swiper.css，如果main.js配置了就可以省略配css;

<script>
    import swiper from "swiper";//swiper小写所以它这个安装的是3版本的；你大写就会报错，也踩雷了
</script>

<style scoped>
  @import "../../../node_modules/swiper/dist/css/swiper.css";
</style>