vue引入swiper报错

html-css022

vue引入swiper报错,第1张

vue项目的package.json中显示的"vue-awesome-swiper": "^2.5.4",用npm install自动安装依赖时装的版本为"version": "2.6.7",而单独安装(npm install vue-awesome-swiper@2.5.4)的则是正常的"version": "2.5.4"。

这两个版本都是基于swiper3的,

而2.6.7版本需要单独引入swiper/dist/css目录下的swiper.css样式文件(类似于swiper4)。

并且2.6.7版本swiper位于node_modules/vue-awesome-swiper/node_modules下;2.5.4不需要单独引入样式文件,并且swiper直接位于node_modules文件夹下。

Module not found: Error: Can't resolve './views/Film/Swiper' in 'I:\project\hdemo\newdemo\src\views'

@ ./src/views/Film.vue?vue&type=script&lang=js&1:0-210 1:226-229 1:231-438 1:231-438

@ ./src/views/Film.vue 2:0-56 3:0-51 3:0-51 9:2-8

@ ./src/router/route.js 3:0-37 17:13-17

@ ./src/main.js 7:0-36 12:10-16

解决方式:外层

不要用

在里面使用:

1.npm命令安装swiper

2.在需要用到swiper插件的组件中引入swiper

3.在组件style中引入swiper插件的css(在node_modules找到Swiper包里边的css文件引入)

4.在methods方法里面初始化swiper插件。

一个页面中引用多个Swiper,可以给每个容器加上ID或Class区分,要保留默认的类名swiper-container。

参考文章:

https://juejin.cn/post/6992794099275268103