组件swiper导入错误

Posted 2023-04-17

参考技术A 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

5.swiper组件

接下来是一个比较常用，也比较重要的组件 swiper,可以自行搜索 vue swiper,有很多开源组件，我这里就复用之前一个熟悉的，

1.新建component/banner.vue

 刷新报错：

 

要适应vue的报错信息，并快速定位错误，这个就scss依赖没加载

执行命令：

Cnpm install sass-loader node-sass --save

Npm run dev

好像效果不对，翻下swiper日志

vue awesome swiper 在nuxt下的使用

1.安装swiper

 

cnpm install -save vue-awesome-swiper

 

2.新建pugins/swiper.js

import Vue from ‘vue‘

import VueAwesomeSwiper from ‘vue-awesome-swiper/dist/ssr‘

Vue.use(VueAwesomeSwiper)

3.修改 nuxt.config.js的plugins

  plugins:[

    { src: ‘~/plugins/swiper.js‘, ssr: false },

  ],

  css:[

    ‘swiper/dist/css/swiper.css‘

  ],

 

这里也是一个典型的使用plugin插件的例子，以后会经常用到

Npm run dev效果如下：