官方git:https://github.com/surmon-china/vue-awesome-swiper 大坑,安装vue-awesome-swiper还需要安装swiper,并且要安装对应的版本。 VUE2开发可以用这两个版本: "swiper": "^5.3.6","vue-awesome-swiper": "^4.1.0", npm install vue-awesome-swiper@4.1.0 --save npm install swiper@5.3.6 --save ma...
vue-awesome-swiper分了两个版本,一个3.0的,一个4.0的,两个版本的差别都比较大 官网地址 3.1.3 yarn add vue-awesome-swiper@3.1.3 页面是上引用 import'swiper/dist/css/swiper.css'import{swiper,swiperSlide}from'vue-awesome-swiper'components:{swiper,swiperSlide} ...
这里一定要对应swiper和 vue-awesome-swiper版本,如果不对应,vue就会各种报错 2. 引入 2.1 全局引入 main.js 2.2 局部引入 3.配置 4. 遇到的问题 1. This dependency was not found:swiper/dist/css/swiper.css 解决办法(版本对应即可): swiper版本:4.5.2; vue-awesome-swiper:3.1.3; 5. 总结 目前发现的...
注意 注意 注意 但是,你没有带版本,npm默认给你装的是swiper6,文件夹里的路径跟swiper4都不一样啦兄弟们。 这才是问题的根源,加入你没找到问题的核心,继续 坑度的话,估计还没好几天辛苦滴爬坑。 出坑记录-正片开始 安装(指定版本 指定版本 指定版本) npm install vue-awesome-swiper@3 --save-dev...
1、安装: npm install vue-awesome-swiper@3 --save-dev 1. 我的版本是: "vue": "^2.6.11" "vue-awesome-swiper": "^3.1.3" 2、使用: <template><swiper:options="swiperOption"ref="mySwiper"><swiper-slide>I'm Slide 1</swiper-slide><swiper-slide>I'm Slide 2</swiper-slide><swiper-slid...
目前(2017-07-11)在使用vue-cli建立的webpack版项目中,直接引入官方的swiper文件会导致报错,所以需要用到vue版本的swiper。 webpack-simple版可直接引入官方swiper文件,参考这里 新建vue项目 此处使用vue-cli新建项目 vue init webpack demo //Enter + y 全部选 yes ...
此处版本是个坑,版本不匹配,文件路径都不一致,肯定会有问题!!不说明版本的demo都是耍流氓!! 抽出单独组建 BannerSwiper.vue;Home.vue 中使用BannerSwiper 代码如下: BannerSwiper.vue <template> </template> import { Swiper, SwiperSlide, directive }...
一定要看好swiper的版本和你的vue版本是否对应,不然铁定踩坑,本人就是这么过来的 然后就是安装,这里我们安装3.1.3版本的 代码语言:javascript 复制 npm install vue-awesome-swiper@3.1.3 然后在nuxt项目的plugins文件夹中新建文件: 代码语言:javascript
vue-awesome-swiper项目可能已经进入废弃状态,并建议转向最新的官方Swiper Vue组件(如swiper/vue),特别是对于需要Vue 3支持和TypeScript的项目。 最后的稳定版本(如v5)可能主要是为了过渡到官方组件而发布的,并对旧API进行了不兼容的更改。如何查找版本信息: ...
安装(指定版本) npm install vue-awesome-swiper@3 上代码 <template><!-- 轮播图 --><!-- @slideChange="slideChange" 这是当前轮播图显示的主图变化是触发的事件 可以通过 $ref获取到当前轮播图swiper 然后通过this.$refs.mySwiper.swiper.realIndex 获取到轮播图当前展示项的真实下标 进而得到当前项的数据...