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 作为里面的轮播图。

列表的对应关系