nuxt 引入swiper插件报错 Cannot resolve swiper/dist/css/swiper.css

最新推荐文章于 2024-05-16 10:17:05 发布
最新推荐文章于 2024-05-16 10:17:05 发布
阅读量1.6k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jacksonlai/article/details/106410143
版权

npm install vue-awesome-swiper

执行完毕后 运行 npm run dev

后报错： Cannot resolve "swiper/dist/css/swiper.css"

之前是baidu了个教程最后发现还得去官网看

https://github.com/surmon-china/vue-awesome-swiper

npm install swiper vue-awesome-swiper --save

只装vue-awesome-swiper 不行

我当前使用的版本是4.1.1 目前最新版本

 

jacksonlai
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
nuxt使用swiper
qq_33476119的博客
04-13 964
nuxt使用swiper 1. 安装vue-awesome-swiper npm install vue-awesome-swiper --save 这条命令结束之后可能会有警告 npm WARN vue-awesome-swiper@4.1.1 requires a peer of swiper@^5.2.0 but none is installed. You must install peer dependencies yourself. 如果出现警告，需安装swiper@^5.2.0 npm i
【NUXT】 Cannot resolve “swiper/dist/css/swiper.css“ （写谷粒学院碰到）
小样yx的博客
08-08 579
报错内容 这个错就是没找到这个文件，原因如下 官方说6.x版本里是没有dist这个文件夹的，所以引入要用swiper/swiper-bundle.css（后面会说在哪里引入），你可以自己找下自己用npm install命令在node_modules文件夹里下载完成的两个依赖swiper和vue-awesome-swiper 会发现自己默认给你下载的是6.8.1，这个6.x版本是没有dist文件夹的，所以当然找不到了，那肯定就会报这个Cannot resolve找不到的错误了，6.x这里用的是swip
开发笔记01：vue结合nuxt.js使用swiper
最新发布
xiaogeng0的博客
05-16 406
使用swiper实现图片的轮播单图平移
nuxt中使用swiper
pkowner的专栏
02-03 930
1.确定各插件版本 2.在https://www.swiper.com.cn/api/navigation/355.html获取帮助 3.参考https://github.com/surmon-china/vue-awesome-swiper提供的信息 在plugins文件夹下新建nuxt-swiper-plugin.js文件写入如下信息 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' ..
nuxt的页面中 使用swiper幻灯片插件报错
qq_39564710的博客
02-05 485
报错 Could not compile template D:\\VSCodeWork\\qiyun\\qiyun-front\\node_modules\\@nuxt\\vue-app\\template\\App.js: Cannot resolve "swiper/dist/css/swiper.css" from "D:\VSCodeWork\qiyun\qiyun-front\swiper\dist\css\swiper.css" 解决办法 找到 package.json ，把"vue-.
Nuxt.js 中使用Swiper Animate
01-07
Vue Nuxt.js 中使用Swiper Animate废话不多说，咱就单刀直入。 废话不多说，咱就单刀直入。 首先安装在 vue 中使用的 Swiper npm i vue-awesome-swiper --save。 安装完成后，在 plugins 文件夹下新建一个 swiper.js...
nuxt-purgecss：删除多余CSS！ Nuxt.js的简洁PurgeCSS包装器
02-06
Nuxt PurgeCSS-删除多余CSS！ 产品特点 轻松删除不需要CSS Webpack或PostCSS模式 已经带有强大的默认设置... 添加nuxt-purgecss到buildModules的部分nuxt.config.js export default { buildModules : [ // Simple
swiper示例，横向布局，垂直布局，配色参数，Grid，Menu
01-29
Swiper 是一个流行的触摸滑动库，常用于创建响应式的轮播、幻灯片和网格布局。在"swiper示例，横向布局，垂直布局，配色参数，Grid，Menu"这个项目中，我们可以深入理解Swiper 8.4.5版本的一些核心特性。 1. **...
nuxt-breaky:在开发过程中在Nuxtjs中显示您的Tailwind CSS断点
03-21
脆弱的 使用tailwindcss 时，在Nuxtjs中显示Tailwind CSS断点 介绍 breaky可帮助您更快地创建响应式设计...添加@teamnovu/nuxt-breaky到buildModules的部分nuxt.config.js 注意：如果您使用的是早于v2.9请使用“ module
vue轮播图插件vue-awesome-swiper
08-28
如果您使用 Nuxt.js/SSR，可以在 browser build 环境中使用以下代码： ``` if (process.BROWSER_BUILD) { const VueAwesomeSwiper = require('vue-awesome-swiper/ssr') Vue.use(VueAwesomeSwiper) } ``` 二、使用...
swiper的使用
04-24
利用swiper进行操作，然后就没有什么了，大家课一看看，
nuxt——swiper的使用
xiaoququ的博客
03-21 3667
装包 bug：装包报错，或者引入报错，是版本的为题，降低版本即可解决 "swiper": "^4.0.7", "vue-awesome-swiper": "^3.1.3" 页面中使用 <div> <swiper ref="mySwiper" :options="swiperOptions" style="width: 200px; height: 200px" > <swipe
在nuxt中使用swiper轮播
weixin_46331416的博客
09-07 3103
swiper监听on中可以使用箭头函数来确定this的指向在一个页面中使用多个或者swiper时只要v-swiper:swiper='option’中的key和option的名称不一样即可如：v-swiper:mySwiper1='swiperOption’和v-swiper:mySwiper2=‘swiperOption2’可通过ref绑定,再使用 $refs来获取swiper中属性和方法：this.$refs.mySwiper.swiper获取swiper对象。
Swiper使用
不积跬步无以至千里
04-11 1318
1.首先加载插件，需要用到的文件有swiper.min.js和swiper.min.css文件。下载地址：http://www.swiper.com.cn/download/index.html#file5     &lt;span style="font-size:14px;"&gt;&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...
在nuxt3中使用swiper幻灯片插件
weixin_44815800的博客
05-23 2162
在nuxt3中使用swiper幻灯片插件
Nuxt配置swiper 新体验
菜鸟史
04-08 1049
时隔大半年，公司又想到了nuxt 来做seo优化。害，借着往日的踩坑记录安安稳稳创建了项目，今天配置swiper时又出现了美丽的问题。（时间： 2021年4月8日） 正常 配置swiper： 1： 安装vue-awesome-swiper --save （我的版本 4.1.1） npm install vue-awesome-swiper --save 2: 安装swiper , 重点来了（截止今日，我安装的最新到了6.5，但是兄弟们，千万不要安装6以上，坑的一批，版本不配套 = =） ...
nuxt.js项目使用swiper轮播插件具体步骤
Yukinoshita_kino的博客
02-25 2286
一. 版本环境 "nuxt": "^2.0.0", "swiper": "^4.5.1", "vue-awesome-swiper": "^4.1.1" 二. 代码部分 2.1 安装插件 npm install swiper@4.5.1 --save npm install vue-awesome-swiper@4.1.1 --save 2.2 plugins文件夹创建swiper.js文件，内容如下 import Vue from 'vue' import css from 'swiper/dist/
如何在nuxt中优雅使用swiper，实现过渡反向+贴合无缝+循环播放【核心代码分析】
Vinca@的博客
04-02 1443
显示屏每次显示swiper-slide的个数，这里建议采用number形式，而不是:slidesPerView="`auto`"，如果采用auto会导致swiper freeMode监听都要去计算，会导致卡顿。默认是ease-out，ease-out会导致每次loop停顿一下。循环播放，如果不设置会导致播放回滚，所以这里必须设置为true。通过伪元素实现双边虚化效果，让整体看起来更顺畅美观。每次播放延迟，设置为0表示不延迟。启用反向自动播放，让上下两层形成视觉差效果。这里采用的是scss语法格式。
nuxt 报错quill Cannot import modules/ImageResize.
09-21
nuxt 报错 "quill Cannot import modules/ImageResize" 是指在使用 Nuxt.js 框架和 Quill 富文本编辑器时，无法正确导入 modules/ImageResize 模块。要解决这个问题，可以按照以下步骤操作： 第一步，确保 Quill ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值