外观
Vue引入第三方
Vue之所以是一个强大的Web框架，原因之一就是它有着强大的第三方插件支持。这里以Swiper为例，介绍一下如何安装第三方插件以及如何使用它们。
Swiper 开源、免费、强大的触摸滑动插件。
Swiper 是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
Swiper 能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果。
温馨提示
由于Swiper也是一个框架，它也会不断地更新。有时官方更新之后较以前的版本有较大的改动，有许多基于以前的版本实现的代码就需要重构，因此安装最新版本时不是最佳选择，这时我们就可以选择安装指定版本。
官方文档：https://swiperjs.com/vue
安装指定版本:
npm install --save swiper@8.1.6
基础实现
<template>
<div class="hello">
<swiper class="mySwiper"> <!--使用组件-->
<swiper-slide>Slide 1</swiper-slide>
<swiper-slide>Slide 2</swiper-slide>
<swiper-slide>Slide 3</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css'; // 导入CSS，不导入则无法显示样式
export default {
name: 'HelloWorld',
components: {
Swiper, // 设置组件
SwiperSlide,
}
}
</script>为轮播图添加指示器
<template>
<div class="hello">
<swiper class="mySwiper" :modules="modules" :pagination="{ clickable: true }"> <!--这里也需要做一个改动-->
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
<swiper-slide>
<img src="../assets/logo.png" alt="">
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { Pagination } from 'swiper';
import { Swiper, SwiperSlide } from 'swiper/vue';
import 'swiper/css';
import 'swiper/css/pagination'; //导入CSS
export default {
name: 'HelloWorld',
data(){
return{
modules: [ Pagination ] // 这里加一个modules
}
},
components: {
Swiper,
SwiperSlide,
}
}
</script>