Nuxt中引入vue-awesome-swiper遇到的问题及解决方案

最新推荐文章于 2024-05-16 10:17:05 发布
最新推荐文章于 2024-05-16 10:17:05 发布
阅读量3.1k 收藏 9
点赞数 6
分类专栏： 门户网站及CMS 文章标签： nuxt awesome-swiper swiper nuxt滚动图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_universe/article/details/108964796
版权
本文详细介绍了在Nuxt环境中集成vue-awesome-swiper过程中遇到的问题，包括安装、配置以及需要注意的事项。在配置文件中添加组件代码，并指出由于Swiper版本更新，配置可能需调整。此外，错误的CSS引用可能导致报错，建议参照官方文档对应版本进行配置。
摘要由CSDN通过智能技术生成

Nuxt中引入vue-awesome-swiper遇到的问题及解决方案

  首先描述下开发环境：

> node -v
v12.18.4
> npm -v
6.14.6

  目前swiper的版本已经更新到6.3.2，一些配置与之前版本有所不同

安装

npm install swiper vue-awesome-swiper --save

可以在package.json中看到swiper及vue-awesome-swiper安装的版本

版本

配置

1、在plugins中新建vue-swiper.js文件，并保存以下内容：

import</
最低0.47元/天 解锁文章
皮卡皮卡~
关注
  • 6
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
nuxt正确使用vue-awesome-swiper
poppy995的博客
11-09 2558
使用nuxt实现轮播图功能适用得是vue-awesome-swiper这个插件 按照官网进行配置 不是报错就是样式有问题 总结了一下能正常使用的步骤 安装插件 // 使用3.1.3版本可以不用引入swiper插件 npm i vue-awesome-swiper@3.1.3 --save 在plugins里创建vue-swiper.js import Vue from 'vue' if (process.browser) { const VueAwesomeSwiper = require
Nuxt引用vue-awesome-swiper轮播图
明知山
04-09 807
npm install vue-awesome-swiper --s npm install swiper --s 我安装的vue-awesome-swiper版本是4.1.1依赖swiper的版本是5.2.0 要注意swiper版本 在plugins新建swiper.js import Vue from "vue"; import VueAwesomeSwiper from "vue-awesome-swiper"; Vue.use(VueAwesomeSwiper); nuxt.config.js
Nuxt.js 引入vue-awesome-swiper报错踩坑记
木荣小逗比
12-26 3635
nuxt.js引入vue-awesome-swiper后，控制台报错window is not defined ###原因： Nuxt在服务端渲染时找不到window ###查询官网文档： ###解决办法： 在nuxt的plugins目录下新建vue-awesome-swiper.js文件，代码如下： import Vue from "vue"; import "swiper/dist/css...
vue-awesome-swiper:NuxtJs中的vue-awesome-swiper示例
04-05
Vue很棒的刷牙 NuxtJs中的vue-awesome-swiper示例 NuxtJs TSX（用于TypeScript的JSX） Swiper v6.0.0版本 # install dependencies $ yarn or yarn install # serve with hot reload at localhost:3000 $ yarn dev index : http://localhost:3000
nuxt swiper vue-awesome-swiper，坑多多
yangzixiansheng的博客
02-14 1539
前提：外包写了个官网，纯html。无seo/不支持一套代码多个语言等，所以重构 开始进坑：用nuxt改写 swiper 巨巨巨多（跳坑请看） 1.nuxt不支持swiper，经常弹出。改用2之后少弹 2.改用vue-awesome-swiper，非常非常不顺利！！！！！百分之八十出现的bug全是这个的错（当然可能是我菜） （1）老老实实下载swiper和vue-awesome-swiper不行，会遭遇样式消失等待各种版本问题，现在就是遇到比较稳定的就是vue-awesome-swiper v3.1.3 +
vue中实现轮播图 vue-awesome-swiper
djiasdngl的博客
08-08 478
vue中实现轮播图 vue-awesome-swiper
vue轮播图插件vue-awesome-swiper
08-28
在 Vue 项目中，需要在 main.js 文件中引入 Vue-Awesome-Swiper： ``` import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) ``` 如果您使用 Nuxt.js/SSR，可以在 ...
nuxt使用swiper
love_weiai的博客
08-27 1868
一、安装vue-awesome-swiper npm install vue-awesome-swiper --save 二、安装swiper npm install swiper --save 三、在pligins目录下创建vue-swiper.js文件 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper' Vue.use(VueAwesomeSwiper) 四、修改nuxt.config.js文.
Nuxt框架下引入Swiper完成带缩略图照片轮播的黑科技
菜鸟小筑
07-04 1343
笔者的吐槽（可以略过_(:з」∠)_）：最近有个项目是基于Nuxt框架，新需求需要新增加一块照片轮播的功能，笔者小白之前用过Swiper插件，感觉还比较好用，一般简单的效果都能实现，于是，按某站点的攻略，开始安装Swiper（npm install swiper)，然后按照文章里基于vue的开发，笔者开始照猫画鼠的try try try之路（用swiper6-发现6只能在vue3以上使用，而nuxt中包含的vue版本是2.x；用 ...
nuxt框架引用swiper问题
rrrrroy_Ha的博客
09-29 2349
nuxt.js框架支持vue写法，因此主要分两大方向 一、用过cdn方式，在nuxt.config.js配置即可 二、通过npm引入，本次主要介绍npm方式 通过swiper官网可知，目前最新是swiper6（实际npm版本可能7以上），但执行 npm install --save swiper 后，发现运行后会提示vue3的东西，结合在vue中使用swiper6的官网文档，可以确认： swiper6对应的是vue3语法 所以nuxt.js在引入swiper6时一定要确认自己的nuxt是
nuxtjs中使用vue-awesome-swiper自定义分页器
Lsir1998的博客
08-16 477
nuxtjs中使用vue-awesome-swiper自定义分页器
开发笔记01：vue结合nuxt.js使用swiper
最新发布
xiaogeng0的博客
05-16 431
使用swiper实现图片的轮播单图平移
nuxt 使用 swiper 3.1.3 报错 Failed to resolve directive: swiper （已解决）
love_Lie的博客
01-18 3122
在引入 vue-awesome-swiper组件时，一值报错，轮播图也无法显示 我开始的代码： 全局的安装配置： 在nuxt.config.js 中引入插件配置 index 页面的引入： 后来使用了官方文档中给的说明，对代码进行修改 我的script部分 最后编译成功 下面是swiper 针对spa 页面给的实例： nuxt 使用swiper 官方文档 <!-- The ref attr used to find the swiper instance --> <template
nuxt服务端渲染注意事项及nuxt内存溢出解决
耶稣与梦的博客
04-16 883
⚠️服务端渲染是前后不分离的，在客户端（浏览器）运行的代码如果在服务端被错误执行后会产生不可预估的后果，例如内存溢出，因此整理一份已经出现过的坑供参考。
在nuxtjs+vue3+ts中使用vue-awesome-swiper做轮播图时踩得坑
m0_52687650的博客
09-08 1511
在nuxtjs+vue3+ts中使用vue-awesome-swiper做轮播图
vue-awesome-swiper使用出现的
云簪阁
05-01 304
vue-cli版本为 4.3 安装vue-awesome-swiper时没有指定版本，引发以下两个错误 1.图片不能再一行显示 2.图片无法滑动 原因：版本冲突、且css文件路径错误 解决办法：之前安装的swiper依赖删掉,通过npm install vue-awesome-swiper@2.6.7 -S安装固定版本 补充说明： github上指定的swiper3版本对应...
vue中swiper,vue-awesome-swiper，轮播图的使用
董小礼的博客
04-26 1984
1.安装vue-awesome-swiper         npm install vue-awesome-swiper --save-dev 2.在main.js          3.在html中          js中          用过swiper的同学要注意了，组件化引入使用swiper时api的使用，跟直接cdn引
在nuxt中使用swiper轮播
weixin_46331416的博客
09-07 3202
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对象。
nuxt中使用 vue-awesome-swiper
03-27
- 在使用 vue-awesome-swiper 之前，需要首先引入 Swiper 的 CSS 样式，在 `nuxt.config.js` 文件中添加以下配置： ```javascript css: [ 'swiper/dist/css/swiper.css' ] ``` - vue-awesome-swiper 会自动按需...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值