组件swiper导入错误

问题一:Can't resolve './views/Film/Swiper' in 'I:\project\hdemo\newdemo\src\views'

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

解决方式:外层

import Swiper from "@/views/Film/Swiper";

不要用

import Swiper from "./views/Film/Swiper";



在里面使用:

1.npm命令安装swiper

npm install swiper --save-dev复制代码

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

import Swiper from "swiper"复制代码

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

@import "../../../node_modules/swiper/swiper-bundle.css";复制代码

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

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

参考文章:

https://juejin.cn/post/6992794099275268103

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容