nuxt正确使用vue-awesome-swiper

最新推荐文章于 2025-03-28 10:20:32 发布

我今年六岁

最新推荐文章于 2025-03-28 10:20:32 发布

阅读量2.7k

点赞数

分类专栏： vue 遇到的问题以及知识点文章标签： vue.js javascript nuxt

本文链接：https://blog.youkuaiyun.com/poppy995/article/details/121232928

版权

本文档详细介绍了如何在Nuxt.js项目中正确安装和配置vue-awesome-swiper插件，以实现轮播图功能。在遵循官方教程的过程中可能会遇到报错和样式问题，本文总结了确保正常工作的步骤，包括安装插件、在plugins目录下创建配置文件，以及引入必要的CSS样式。同时提供了github源码链接以供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用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("vue-awesome-swiper/dist/ssr");
    Vue.use(VueAwesomeSwiper);
}

在nuxt.config.js中引入vue-swiper.js以及插件自带的css样式

import env from './env' // 环境配置文件
export default

最低0.47元/天解锁文章