vue3中使用swiper7

最新推荐文章于 2024-08-19 10:30:00 发布

是啥东西呢

最新推荐文章于 2024-08-19 10:30:00 发布

阅读量436

点赞数 2

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_67401270/article/details/123370563

版权

本文介绍如何在 Vue3 项目中使用 Swiper7，包括普通 Vue3 和 Vue3 TypeScript 项目的集成，解决样式丢失问题，组件样式修改，垂直方向设置以及无限循环的实现。详细步骤和代码示例帮助开发者避免遇到常见问题。

摘要由CSDN通过智能技术生成

项目场景：

前不久刚在我的vue3项目中用了swiper6，坑真的是比农村的泥路还要多，这不官方直接来了个swiper7，接下来手把手教下大家怎么用，让大家少走弯路。

另外swiper7的话不会出现打包后放服务器样式丢失的情况了=》swiper6打包后样式丢失

普通vue3项目：

win10的小伙伴我们可以先在桌面（或者文件夹里）按住Shift之后点击右键打开Powershell窗，不是的自己打开cmd，效果是一样的。
在这里插入图片描述
之后在命令行里面输入vue create vue3

接着选择创建默认的vue3项目

接着用VSCode编辑器打开项目，在命令输入npm i swiper，成功后package.json文件中会标上

接着我在官网找了个功能比较全的代码作为例子，如下：

<template>
  <swiper
    :modules="modules"
    :slides-per-view="3"
    :space-between="50"
    navigation
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: true }"
    @swiper="onSwiper"
    @slideChange="onSlideChange"
  >
    <swiper-slide>Slide 1</swiper-slide>
    <swiper-slide>Slide 2</swiper-slide>
    <swiper-slide>Slide 3</swiper-slide>
    ...
  </swiper>
</template>
<script>
  // import Swiper core and required modules
  import { Navigation, Pagination, Scrollbar, A11y } from 'swiper';

  // Import Swiper Vue.js components
  import { Swiper, SwiperSlide } from 'swiper/vue';

  // Import Swiper styles
  import 'swiper/css';
  import 'swiper/css/navigation';
  import 'swiper/css/pagination';
  import 'swiper/css/scrollbar';

  // Import Swiper styles
  export default {
    components: {
      Swiper,
      SwiperSlide,
    },
    setup() {
      const onSwiper = (swiper) => {
        console.log(swiper);
      };
      const onSlideChange = () => {
        console.log('slide change');
      };
      return {
        onSwiper,
        onSlideChange,
        modules: [Navigation, Pagination, Scrollbar, A11y],
      };
    },
  };
</script>

我们把它拷到App.vue中全部替换掉之后执行，你会发现报css依赖不存在的错误，