文章目录总结：
由版本引起的一系列坑
时间：2020.07.08（时间，版本很重要-坑的起源）
这两天在vue中使用做轮播图，就随手百度了一下，找个帖子开始参考（坑开始了）
按照图中的方法，原计划5分钟搞定，一顿操作猛如虎，然后vue各种报错，然后再各种百度，结果开始了2天的爬坑之旅
坑1
按照上图安装方法，npm将安装最新的vue--（@4），对应的是，但是国内暂时没有的文档，意味着没法参考使用方法，有问题也不好去网上找
坑2
最新版vue--的安装姿势是这样子滴：
文章插图
npm install swiper vue-awesome-swiper --save对比vue--版本3
npm install vue-awesome-swiper --save没有孙猴子的火眼金睛，你很可能忽略（蝴蝶效应，引起后续一系列坑）
坑3
划重点：这是网上大伙查找的最多的坑，搞了很久没解决，有可能会导致小伙伴们暴躁易怒，哈哈
安装完之后，你又在某度上查找使用方法，网友一般建议你这样使用
import { swiper, swiperSlide } from "vue-awesome-swiper";import "swiper/dist/css/swiper.css";export default {components: {swiper,swiperSlide},data() {return {swiperOption: {loop: true,autoplay: {delay: 3000,stopOnLastSlide: false,disableOnInteraction: false},// 显示分页pagination: {el: ".swiper-pagination",clickable: true //允许分页点击跳转},// 设置点击箭头navigation: {nextEl: ".swiper-button-next",prevEl: ".swiper-button-prev"}}};},....然后你的vue就使劲跟你报错，说找不到.css，然后你又继续某度，无限坑 。。。
或者你去看了一下路径，再去找，发现没有这货 。那就安装个呗
npm install swiper --save
文章插图
但是，你没有带版本，npm默认给你装的是，文件夹里的路径跟都不一样啦兄弟们 。
这才是问题的根源，加入你没找到问题的核心，继续某度的话，估计还没好几天辛苦滴爬坑 。
正确的使用姿势： 安装（指定版本）
npm install vue-awesome-swiper@3 --save-dev组件中使用
这里我贴出在页面中简单使用方法（先跑起来），小伙伴们可以完全复制粘贴，复杂的东西我都简化掉了 。版本: vue@2.5.2，vue--@3.1.3
I'm Slide 1I'm Slide 2I'm Slide 3.recommendPage .swiper-container{position: relative;width: 100%;height: 200px;background: pink;}.recommendPage .swiper-container .swiper-slide{width: 100%;line-height: 200px;background: yellowgreen;color: #000;font-size: 16px;text-align: center;}总结： 不能盲目瞎抄，不注意自己版本和网上方法里版本差异不要放弃，遇事沉着冷静，顺着vue报错的提示去看看看下插件包里的路径，可能有用处
【vue中swiper vue-awesome-swiper的使用方法和爬坑大法】最后，如果帮你脱坑的话，希望小伙伴们打赏一毛钱