nuxt框架引用swiper问题

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 swiper@5.4.5 vue-awesome-swiper --save

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

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