nuxt3：swiper实现轮播效果

一、背景

nuxt3项目使用swiper实现轮播图效果。

二、官网文档

2.1、Swiper CDN

Swiper CDN - Swiper中文网

2.2、使用方法

Swiper使用方法 - Swiper中文网

2.3、基础演示

Swiper演示 - Swiper中文网

2.4、api

中文api - Swiper中文网

三、项目使用

3.1、nuxt.config.ts引入css、js

link: [
    { rel: 'stylesheet', type: 'text/css', href: 'https://unpkg.com/swiper@8/swiper-bundle.css'}
],
script: [
    {
        type: 'text/javascript',
        src: 'https://unpkg.com/swiper@8/swiper-bundle.js'
    }
]

3.2、页面使用

3.3、效果展示

四、过程记录

记录一、

再引入swiper时，尝试了npm 包： swiper、vue-awesome-swiper等，尝试在nuxt3里增加plugin的方式引入，都没有成功，个人感觉应该是可以的，可能是我没有尝试对，最后使用了在nuxt.config.ts中引入的方法。

记录二、

在nuxt.config.ts中引入网络上的js、css，可能会加载慢导致页面加载速度也慢，我们可以把js、css放在public目录下，引入本地文件，这样可以加快文件请求速度。

五、欢迎交流指正，关注我，一起学习。