Vue脚手架中swiper插件的引入方式

一、安装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了。