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 |