vue---引入第三方（轮播图）

Swiper：

Swiper开源、免费、强大的触摸滑动插件

Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端

Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效果

①官方文档：swiper.com.cn

②vue官方文档：https://swiperjs.com/vue（如何在vue当中使用swiper）

③查找其他相关文件可以输入网址：github.com在搜索框输入vue-swiper

④可以在https://v2.cn.vuejs.org中找到资源列表下的Awesome vue

主要看的还是components&libraries（组件和库）

1、第一步需要在终端安装swiper

cnpm install --save swiper

打开package.json文件，可以看到swiper版本号，版本号不同可能出现错误。

注：安装指定版本：npm install --save swiper@8.1.6

2、打开终端启动：

npm run serve

3、打开components中的HelloWorld.vue文件，

<template>
    <div class="hello">
        <swiper>
            <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{ Swiper,SwiperSlide} from 'swiper/vue';
    import 'swiper/css';
    export default{
        name:'HelloWorld',
        components:{
            Swiper,
            SwiperSlide
        }
    }
</script>

<style scoped>
    img{
        width:100%;
    }
</style>

可以在网上查找图片，把图片另存为到vue-demo---->src---->assets当中，可以在程序目录中看到assets下已经有了图片。

添加指示器

<template>
    <div class="hello">
        <swiper :modules="modules" :pagination="{clickable:true}">
               //"modules"代表指示器Pagination
               //pagination代表指示器以什么形式触发，点击指示器允许切换

            <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/css/pagination'

    import {Swiper,SwiperSlide} from 'swiper/vue';
    import 'swiper/css';
    
    export default{
        name:'HelloWorld',
        data(){
            return{
                modules:[Pagination]//第二步
            }
        },
        components:{
            Swiper,
            SwiperSlide
        }
    }
</script>

<style scoped>
    img{
        width:100%;
    }
</style>