Vue引入第三方
以轮播图为例
Swiper开源、免费、强大的触摸滑动插件
Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端
Swiper能实现触屏焦点图、触屏tab切换、触屏轮播图切换等常用效果
插件官方文档网址:Swiper Vue幻灯片切换组件 | SwiperJS中文网
安装指定版本的命令为:npm install –save swiper@8.1.6
<template>
<div>
<swiper :modules="modules" :navigation="true" :loop="true" :pagination="{ clickable: true }">
<!-- modules为导入的模块,绑定导入的模块导航模块和分页模块,loop实现轮播图循环模式 -->
<swiper-slide>
<img src="../assets/logo.png">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png">
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper';
import { Navigation } from 'swiper';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import 'swiper/css';
export default {
name: 'HelloWorld',
components: {
Swiper,
SwiperSlide,
},
data() {
return {
modules: [Navigation, Pagination]
}
}
}
</script>