nuxt框架引用swiper问题_nuxt 中使用swiper 可以引用吗_rrrrroy_Ha的博客-程序员宅基地

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是否支持vue3语法。

我的项目运行会提示一些警告，所以我选择引入低版本。官方对于低版本推荐的是vue-awesome-swiper。

网上写法很多乱七八糟的，在此做一下提示：一定要检查好swiper和vue-awesome-swiper的版本号！！！

1.vue-awesome-swiper默认安装的好像是4.x，这就要求swiper只能是6以下的版本（不包括swiper6），例如我本地的

引用的时候和网上差不多，注意一下css

这个css的路径跟swiper版本有关，vue-awesome-swiper的仓库里也有介绍

如果你写了还是报错或css样式没出来，那就去node_modules里去看看swiper的css到底在什么层级下，按照实际层级引用。

2.如果你想使用的是更低版本，比如swiper2、swiper3、swiper4，则要选择对应的vue-awesome-swiper版本，人家仓库也有写

网上的范例基本都是swiper+vue-awesome-swiper的用法，但很少明确这俩版本之间的关系，就很容易安装的时候变成swiper6+，vue-awesome-swiper4+，然后就找不到swiper，各位还是需要警惕的。

下面给出我的npm命令以供参考

npm install [email protected] vue-awesome-swiper --save

如果还需要更低版本 vue-awesome-swiper也指定版本即可。

具体用法就不再赘述了，相信swiper官网能指引各位高手做出轮播特效

本文链接：https://blog.csdn.net/rrrrroy_Ha/article/details/120542459

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

使用git从openshift克隆应用报错_"replace git.mlyx.com/iaas/openshift-client-go.git-程序员宅基地

从https://openshift.redhat.com/app/console/applications点进相关application。找到source code：ssh://[email protected]/~/git/xxx.git/ 执行git clone ssh://[email protected]/~/git/xxx.git/ 报错： Permission de_"replace git.mlyx.com/iaas/openshift-client-go.git: version \"v4.14.0\" invalid"

AFNetworking3.1.0源码分析(十一)之AFSecurityPolicy验证服务器信任-程序员宅基地

通过上篇文章总体的了概述了AFSecurityPolicy的功能。先了解下数字证书和原理，这篇文章非常详细的讲解了证书以及认证的原理。下面继续详细分析AFSecurityPolicy验证服务器信任的过程涉及的方法：1：设置本地证书集合，和获取本地证书的公钥并创建公钥集合1.1设置本地证书集合- (void)setPinnedCertificates:(NSSet *)pin

Cops And Roobers Gym - 101982E_gym ecops and roobers-程序员宅基地

https://cn.vjudge.net/problem/Gym-101982E#include <iostream>#include <cstring>#include <queue>#include <vector>#include <algorithm>#include <cstdio>#inclu..._gym ecops and roobers

linux运行阴阳师,Python玩网易阴阳师百鬼夜行_小野的乐趣生活的博客-程序员宅基地

[toc]Python玩网易阴阳师百鬼夜行目标使用Python实现网易阴阳师百鬼夜行环节的自动撒豆原因撒逗环节又伤屏幕，又伤手指，还无聊累积了太多次数后不玩又觉得浪费预备Android 手机 (用于安装和运行游戏)网易阴阳师游戏Linux (用于安装 adb 及开发和运行脚本)VIM (用于编辑脚本)adb (用于电脑与Android连接交..._百鬼夜行脚本

numpy中newaxis的用法-程序员宅基地

用于增加一个新的维度。arr1=np.array([1,2,2,8,0,9,6,0])print(arr1[np.newaxis])print(arr1[:,np.newaxis])print(arr1[:,np.newaxis][:,np.newaxis])[[1 2 2 8 0 9 6 0]][[1][2][2][8][0][9][6][0]...

lightoj(1136 - Division by 3 )规律-程序员宅基地

There is sequence 1, 12, 123, 1234, ..., 12345678910, ... . Nowyou are given two integersA and B, you have to find the numberof integers fromAth number to Bth (inclusive)number, which are divisibl