知道這個套件一陣子了，但有一天要使用他的時候被官方文件寫的這段話嚇到。

Swiper Vue components will likely to be removed in future versions. It is recommended to migrate to Swiper Element instead.

於是依照他的建議使用了WebComponent導入專案
先照著官方文件的步驟來安裝吧！

安裝

1. 下載套件

$ npm install swiper 

2. 當您從節點模塊導入 Swiper 自定義元素時，我們需要手動註冊它。它應該只執行一次，並且它會在全局範圍內註冊 Swiper 自定義元素。（看起來是要在main.js當中註冊它）

// main.js
import { register } from 'swiper/element/bundle';
const app = createApp(App);
app.use(register);
app.mount('#app');

假如今天沒有要用Vue可以直接

// 來自 CDN 的 Swiper 自定義元素
<script src="https://cdn.jsdelivr.net/npm/swiper@9/swiper-element-bundle.min.js"></script>

這種情況會自動註冊，不需要調用register()

3. 模板中使用

// 任何.vue檔案
<template>
    <!-- 使用pagination功能 -->
    <swiper-container pagination="true">
        <swiper-slide>
            <img :src="圖片src綁定的資料" alt="">
        </swiper-slide>
        <swiper-slide>
            <img :src="圖片src綁定的資料" alt="">
        </swiper-slide>
    </swiper-container>
</template>

到這邊文檔還是看的懂，而且可以正常使用
但刺激的來了，瀏覽器開始跳出一堆

大意是雖然註冊成為全域的 Custom Element ，但是這樣 Vue 並不知道這個 Custom Element 的存在，所以要去 vue.config.js 設定讓 webpack 在編譯的時候可以看的懂

開始修改

在vue.config.js底下新增這段語法

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => ({
        ...options,
        compilerOptions: {
          // 將所有帶 swiper- 的標籤名都視為自定義元素
          isCustomElement: tag => tag.startsWith('swiper-')
        }
      }))
  }
}

終端機重新執行npm run surve
那段討厭的警告就消失了

補充更改樣式

1. 邪教派
   直接在sass中這樣寫..

:root {
    --swiper-theme-color: #9747ff;
    --swiper-pagination-bottom: 0px;
}

2. 官方文件教的

  const swiperEl = document.querySelector('swiper-container');

  const params = {
    // 直接寫要更改的CSS樣式
    injectStyles: [
      `
      :host(.red) .swiper-wrapper {
        background-color: red;
      }
      `,
    ],

    // 可以匯入css檔案
    injectStylesUrls: ['path/to/one.css', 'path/to/two.css'],
  };

  Object.assign(swiperEl, params);
  // 初始化
  swiperEl.initialize();

提供給跟我一樣迷茫的旅人，如果有理解錯的地方歡迎糾正！