vue 引用第三方库 Swpier轮播图

本文全程干货，没有废话

1.使用 npm 安装 swiper，使用 save 保存到 packjson 中

npm install --save swiper

2、把 swiper看成是第三方库或者是组件，然后按照，引用，挂载组件，使用组件三步法。

3、在 script 里的 export default 上面引用这俩。

import { Swiper, SwiperSlide } from ‘swiper/vue’;

import ‘swiper/css’;

4、

在 export  default{components:{Swiper,SwiperSlide,}}挂载这个组件

5、在写 html 的地方使用这 swpier 组件

<swiper><swiper-slide>Slide 1<img src="./assets/img.webp" alt=""></swiper-slide><swiper-slide>Slide 3<img src="./assets/logo.png" alt=""> 		  			</swiper-slide><swiper-slide> Slide 3<img src="./assets/img.webp" alt="">		</swiper-slide>  </swiper>

原理

通过引用-挂载-第三方的 swpier-然后通过 swpier 作为父容器，swiperslide 作为里面的轮播图。

列表的对应关系

轮播图	无序列表	有序列表
swiper	ul	ol
swiperslide	li	li