swiper插件在vue脚手架中的使用方式

1、怎么引入？

2、加载哪个样式？

3、怎么进行swiper的初始化？在什么位置初始化？

4、在vue中怎么使用

直接引用啊。

main.js

一、安装swiper插件
1、打开终端，进入vue-cli脚手架搭建的项目中

            cd xx/xx/xxx/xxx

2、安装swiper插件

            npm install swiper 

3、跑起来

           npm run dev

二、swiper的使用
注意：在package.json中查看自己的swiper版本，然后想要什么效果就可以直接去https://3.swiper.com.cn/（swiper官网）查看。

楼主因为没去看自己的版本，按照swiper3的版本去调样式，一直调不出来

查看swiper版本，去swiper官网调其他样式效果：

"dependencies": {
    "babel-runtime": "^6.26.0",
    "jquery": "^3.2.1",
    "swiper": "^4.3.5",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },
1.<template>中写入的内容

<!--swiper组件-->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../../../../static/car/datu.png" alt="" /></div>
        <div class="swiper-slide"><img src="../../../../static/car/jiancai.png" /></div>
        <div class="swiper-slide"><img src="../../../../static/car/jiudian.png" /></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
 
    <!-- 如果需要导航按钮 -->
    <!--<div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>-->
 
    <!-- 如果需要滚动条 -->
    <!--<div class="swiper-scrollbar"></div>-->
</div>
2.<script>中写入的内容

<script>
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'
    export default {
        mounted:function() {
            var mySwiper = new Swiper('.swiper-container', {
                direction: 'horizontal',
                loop: true,
                autoplay:true,
               })
        },
</script>
然后就ok了。

swiper官网里有步骤 https://swiperjs.com/vue  其实跟引入其他插件方式一样

您好，我是有问必答小助手，您的问题已经有小伙伴解答了，您看下是否解决，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月 有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632