本次寫的 vue cli 專案需要用到 swiper ，好讓畫面看起來有些變化，之前都是用 CDN 的方式載入，直到某次 swiper 換了 CDN 的網址，導致我之前做的網頁 swiper 效果都掛掉了。
雖說 Bootstrap 也有 carousel 可以用，但是效果還是比不上 swiper 來的好，所以...來研究一下吧。
首先看到 vue-awesome-swiper 的文件有寫到載入方法：
npm install swiper vue-awesome-swiper --save先用 npm 安裝好 swiper 與 vue-awesome-swiper 兩個套件。
接下來打開你 vue cli 專案資料夾的 main.js 輸入：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import swiper, { Navigation, Pagination, Autoplay } from 'swiper'
//上面這行官方文件沒寫到。// import style (>= Swiper 6.x)
import 'swiper/swiper-bundle.css'
// import style (<= Swiper 5.x)
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default options with global component } */)
swiper.use([Navigation, Pagination, Autoplay])
//上面這行官方文件也沒寫到。
這邊要注意，你所使用的 swiper 套件版本，跟你載入 css 的方法有關。
接下來，你就能直接到 vue-awesome-swiper 的範例網頁挑選你想要用的效果。
以我這個專案為例，我有用到這個效果：
於是我按點選右上角的按鈕，查看他的原始碼：
這格式，一看就知道是 Vue CLI components 的樣子，看到這邊就知道，該在專案資料夾裡開個元件檔案。
總之，開好元件的 .vue 檔後，在檔案內貼上你要使用的 swiper 樣式原始碼，然後到 main.js 檔匯入你剛開好的 .vue 檔。
import introswiper from './components/Intro-swiper.vue';Vue.component('intro-swiper', introswiper);
最後在 HTML 內插入 <intro-swiper></intro-swiper> 就大功告成啦！
順帶一提，一開始在 main.js 引入套件的時候記得加上
import swiper, { Navigation, Pagination, Autoplay } from 'swiper'
swiper.use([Navigation, Pagination, Autoplay])這兩行，不然 swiper 的 Navigation 跟 Pagination 都無法正常顯示，如果你要自動撥放的話還要加上 Autoplay。
如果製作 RWD 網頁有用到 swiper 的話，記得在 swiperOption 裡加入breakpoints，可以快速做出你要的響應式設計。
— 2021.03.19更新 —
今天發現 swiper 元件與 v-for 並用有可能出現問題，在於內部利用 v-for 產生的圖片尚未渲染出來，swiper元件就產生好了，所以導致畫面無法正常滑動，要解決此問題，可在 <swiper> 加上 v-if 來判斷內部的資料是否已導入。
