前言

該系列是為了讓看過Vue官方文件或學過Vue但是卻不知道怎麼下手去重構現在有的網站而去規畫的系列文章，在這邊整理了許多我自己使用Vue重構很多網站的經驗分享給讀者們。

我們都會因為方便所以來選擇好用的套件來輔助我們網站的開發，但是很常會看到其他人選擇套件的標準是除了可以達到目的以外，其他的考量都沒有就給他使用下去了，但是往往很多東西都是不必要的，甚至是會給未來的自己找很多麻煩，今天我就來談一下我在重構專案上面，看過人家使用最多不必要的套件以及我是如何去評估這個套件適不適合使用。

在網路上面會有許多人寫了不少跟套件，這些套件通常可以分兩大類，工具類 or 功能類，舉例 Lodash 來說好了，這就是一個工具類的套件，那像是 Swiper.js 就是功能類的套件。

考量一：會選擇跟框架耦合性低的套件

如標題，選擇套件的時候其實我很討厭一些工具類的套件一直跟框架綁再一起，沒有必要阿，列出幾個我的考量點 :

1. 因為它既然是工具類的套件，那自然就已經設計過它的使用方式，沒有必要再跟框架綁一層，然後在想新的使用方式 。
2. 把工具類套件跟框架整合，會有版本上面的問題，假如今天的專案是vue2，如果專案要升級vue3的話，那你使用的套件的整合的vue版本比較低，那不就使用這個套件的地方就要全部改掉，或是等這個套件的作者升級成Vue3，所以會有版本遷移的問題。
3. 如果是工具類套件跟框架整合的套件，當今天發生錯誤的時候，你要排查到底是原來的工具類套件的問題，還是重新包裝過後的套件的問題，會變成很難去排查狀況。

常常看到的套件有幾個是我覺得沒有甚麼必要使用的，像是 vue-axios 、vue-cookies、vue-awesome-swiper、BootstrapVue等等，還有很多這類型的套件其實就有原本的可以使用，根本沒有必要再去使用別人另外包裝過的。

考量二：不要用依賴性高的套件

什麼是依賴性高的套件 ? 所謂的依賴性高的套件就是像我上面提到的 vue-axios 、vue-cookies、這類型的套件就是二度封裝依賴性高，他同時會需要你載入原本的 axios 還有 vue-axios，你都已經載入了 axios，何必在載入一個...，所以例如我今天要做一個輪播效果，我就會選擇用純 swiper.js ，或是我今天要做一個拖曳排序的效果，我就會選擇用 Vue 來開發，沒有去過度依賴其他套件的 Vue.Draggable 這個套件，而且這個套件還有同時支援 Vue2 跟 Vue3 的版本，這是在選用套件上面最理想的一種。

現在 swiper.js 官方自己有出了vue的版本( 以前沒有 )，所以以前用 vue-awesome-swiper 的人現在統一的話，就還是要改回官方原版的，又多了一層麻煩。

你會發現我選擇套件的這個邏輯，就是我會盡量選擇不要過度依賴其他套件的套件，這樣才可以在問題發生的時候更好找到源頭，就有點像是以前很多套件都依賴Jquery，但是今天重構的時候要去除 jquery 化，那這套件不就要拔掉重新找了嗎...

所以套件的選用最好找純 js 開發的，或是單純用 Vue 開發且沒有過度依賴其他套件的，才是降低專案的維護成本的好選擇。

考量三：找客製化程度高的套件

我們開發網站的時候常常會需要讓 UI 符合設計稿的樣子，但是往往我們找到的套件本身就會自帶許多基本的樣式，無法符合我們自己的網站設計，所以這時候要去修改套件的樣式，但是有些套件設計的方式會很難去修改style，例如說樣式的改變或是hover的效果是用 js 去改變的，那這樣你自己去寫 css 覆蓋就沒有用了，又或是你找的套件它在修改樣式的方式上面過於複雜，可能會導致未來接手的人不知道其中前因後果，而造成後續維護上的困難，這都是很常會發生的事情，所以我在找套件的時候都會特別地去注意幾個點 :

1. CSS 樣式好不好去複寫或是修改。
2. 有沒有符合我最基本的功能上需求，如果有缺一些功能的話，我自己去改它的套件好不好去擴充。
3. 有沒有提供好的生命週期接口，可以去應付執行階段遇到的需求問題。

這幾點是我再找套件的時候常常會去看的點，因為很多人找到了套件就直接用，結果發生了功能上面的不足或是樣式上面無法修改，就直接放爛不管，倒置專案上線的時候再找人求救，這時候邏輯已經包覆的很深了，要改也會沒有這麼容易，所以我會建議一開始的時候就先仔細的思考幾個點，再來決定要不要用這個套件。

考量四：這個功能或是 UI 有需要用套件嗎 ?

有的時候頁面上面有一些功能其實是不需要使用套件的，我就不知道很多人都喜歡連簡單的功能都不願意自己寫，寧願去找人家包好然後不好處理的套件，也不願意花個 1~ 2小時自己寫一個簡單然後沒有其他多餘功能自己包的套件，自己寫的可控性還是比較好的，除非自己寫需要花上過多的時間成本。

那你可能會說假設一個功能要寫 1 小時，但是我用套件只要 10 分鐘，當然是越快越好啊，但是如果你今天是做產品或是服務的話，那你現在省下來的時間未來就會轉嫁到你的維護成本上面，只是很多人都沒有辦法意識到這點。

考量五：難道真的不要需要用套件嗎 ?

唉! 不是，我不是說不能用套件阿，而是考量到開發的時間成本，還有專案的維護性，以下我列幾個一定要使用套件的理由：

1. 開發時間太短，用套件可以節省時間。
2. 專案淘汰率高，用套件可以更快速完成收錢。
3. 套件本身是由開發團隊在維護更新，也解決了許多的 bug 問題，這種類型的套件自然有者更高的穩定性，所以會比自己寫的來的好用且更全面。
4. 有眾多的使用者在使用，所以遇到問題的時候也比較好去找到別人使用的經驗，還有自己沒想過的解決方案。
5. 比起自己自幹自秀，只要能掌握且更清楚的知道這個套件的原理，用套件其實沒有什麼問題，就怕是用了然後也不知道它在幹嘛。

有關於套件的介紹我這邊之前有寫一篇文章來介紹開發上面常用的套件，有興趣的朋友可以看看 ( 傳送門 )

其實套件的選用的確一直被大家所拿出來討論，但是其實最重要的是要看合不合適，沒有一定的不行，就我來說我也愛用套件，不喜歡重複造輪子，如果人家的套件是有長時間再維護而且有廣大使用者在使用，沒理由你自己寫的會比它好吧，所以該用套件的時候我還是會用，好啦~以上就是我在選擇套件上面的思考邏輯，我們明天見啦~

那如果對於Vue3不夠熟的話呢?

Ps. 購買的時候請登入或註冊該平台的會員，然後再使用下面連結進入網站點擊「立即購課」，這樣才可以讓我獲得更多的課程分潤，還可以幫助我完成更多豐富的內容給各位。

我有開設了一堂專門針對Vue3從零開始教學的課程，如果你覺得不錯的話，可以購買我課程來學習
https://hiskio.com/bundles/9WwPNYRpz?s=tc

那如果對於JS基礎不熟的朋友，我也有開設JS的入門課程，可以參考這個課程
https://hiskio.com/bundles/b9Rovqy7z?s=tc

訂閱Mike的頻道享受精彩的教學與分享

Mike 的 Youtube 頻道
Mike的medium
MIke 的官方 line 帳號，好友搜尋 @mike_cheng