添加 Swiper

Swiper 是一个 JavaScript 触摸滑动器，可用于现代 Web 应用程序（桌面或移动）以及移动原生或混合应用程序。它是 Framework7 (https://framework7.io/) 和 Ionic Framework (https://ionicframework.com/) 的一部分，用于构建移动混合应用程序。我们可以像在之前的章节中对其他框架和库所做的那样，使用其 CDN 资源轻松地为 Web 应用程序设置 Swiper。但是，让我们通过以下步骤了解如何在 Nuxt 中以正确的方式安装和使用它：

  1. 通过终端使用 npm 在您的 Nuxt 项目中安装 Swiper：

    $ npm i swiper

  2. 将以下 HTML 元素添加到 <template> 块中以创建一个图像滑块：

    // pages/index.vue
<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="~/assets/images/sample-01.jpg"></div>
      <div class="swiper-slide"><img src="~/assets/images/sample-02.jpg"></div>
      <div class="swiper-slide"><img src="~/assets/images/sample-03.jpg"></div>
    </div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
</template>

    从这些元素中，我们想要创建一个包含三个图像的图像滑块，这些图像可以从左侧或右侧滑动到视图中，并带有两个按钮——一个“下一个”按钮和一个“上一个”按钮。

  3. 在 <script> 块中导入 Swiper 资源，并在页面挂载时创建一个新的 Swiper 实例：

    // pages/index.vue
<script>
import 'swiper/swiper-bundle.css'
import Swiper from 'swiper/bundle'
export default {
  mounted () {
    var swiper = new Swiper('.swiper-container', {
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    })
  }
}
</script>

    在此脚本中，我们将图像滑块的类名提供给 Swiper，以便可以初始化一个新的实例。此外，我们通过 Swiper 的 navigation 选项将“下一个”和“上一个”按钮注册到新的实例。

    您可以在 https://swiperjs.com/api/ 找到初始化 Swiper 的其余设置选项以及可用于与实例交互的 API。

  4. 将以下 CSS 样式添加到 <style> 块以自定义图像滑块：

    // pages/index.vue
<style>
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

    在这个样式中，我们只想通过使用 CSS 的 width 和 height 属性的 100% 使滑块完全占据屏幕，并通过使用 CSS flex 属性将图像在滑块容器中居中。

  5. 现在您可以运行 Nuxt 并在浏览器上加载该页面，您应该会看到一个交互式的图像滑块正在正常工作。

    您可以在 Swiper 官方网站 https://swiperjs.com/demos/ 上找到一些很棒的幻灯片示例。

请注意，我们刚刚使用 Swiper 的方式仅适用于单个页面。如果您想在多个页面上创建滑块，则可以通过插件全局注册 Swiper。因此，让我们通过以下步骤了解如何做到这一点：

  1. 在 /plugins/ 目录下创建一个 swiper.client.js 插件，导入 Swiper 资源，并创建一个名为 $swiper 的属性。将 Swiper 附加到此属性并将其注入到 Vue 实例中，如下所示：

    // plugins/client-only/swiper.client.js
import 'swiper/swiper-bundle.css'
import Vue from 'vue'
import Swiper from 'swiper/bundle'
Vue.prototype.$swiper = Swiper

  2. 在 Nuxt 配置文件中的 plugins 选项中注册此 Swiper 插件：

    // nuxt.config.js
export default {
  plugins: [
    '~/plugins/client-only/swiper.client.js',
  ],
}

  3. 现在你可以在你的应用程序的多个页面中通过 this 关键字调用 $swiper 属性来创建 Swiper 的新实例，例如：

    // pages/global.vue
<script>
export default {
  mounted () {
    var swiper = new this.$swiper('.swiper-container', { ... })
  }
}
</script>

同样地，我们将 CSS 资源组织在了插件文件中，而不是通过 Nuxt 配置文件的 css 选项进行全局注册。然而，如果你想全局覆盖任何这些 UI 框架和库中的一些样式，那么通过在 css 选项中全局注册它们的 CSS 资源，然后在存储在 /assets/ 目录中的 CSS 文件中添加你的自定义样式，会更容易实现覆盖。

你可以从我们的 GitHub 仓库的 /chapter-3/nuxtuniversal/adding-swiper/ 路径下下载本章的源代码。如果你想了解更多关于 Swiper 的信息，请访问 https://swiperjs.com/。

做得好！你已经成功地掌握了我们为你选择的一些流行的 UI 框架和库，它们将加速你的前端开发。我们希望它们在你未来创建的 Nuxt 项目中能够有所帮助。在接下来的章节中，我们将偶尔使用其中的一些框架和库，尤其是在最后一章——第 18 章，使用 CMS 和 GraphQL 创建 Nuxt 应用程序中。现在，让我们总结一下你在本章中学到的内容。