我們如何從 Vue 遷移到 Vue 3

大約一年前，我們終於從 Vue 2 遷移到 Vue 3。距其正式生命週期還有 6 個月。當時，我們的應用程式有大約100 個頁面和300 個元件，並使用了一些與Vue 相關的經典依賴項：Vue-router、Pinia（和Pinia ORM）、Vue-i18n、TipTap、ElementUI（ElementPlus for Vue 3）

以下是一些對我們有幫助的建議。由於 Vue 2 仍然運作得很好，所以你最好花點時間來簡化遷移，而不是倉促完成，破壞你的應用程式並摧毀你的道德！

---

1️⃣ 開始前

警告其他人

事情一定會破裂，哪怕是一點點。你最好確保其他團隊沒問題。

升級到最新的Vue 2.7

顯然，由於大多數新功能都在 Vue 2.7 中提供，並且是向後相容的，如果您還沒有，那麼趕上是很重要的。遷移到 Vue 3 時，您仍然可以享受它的功能。遷移的步驟也會更小。

花點時間

這可能是一項相當大的工作，因此您最好預計在很長一段時間內降低風險。而且，它幫助我們（開發者）保持道德！計劃幾週甚至幾個月，因為你知道什麼時候開始，但你不知道什麼時候完成......最後，最好每週花一些時間，這樣任何中斷都不會造成災難性的。

創建團隊

如果可能的話，不要只依賴一個開發人員，因為這是一項令人筋疲力盡的任務。此外，您需要快速回饋和合併循環，因為許多變更會影響整個程式碼庫，並且可能每天都會產生衝突。不用處理這個就已經夠難的了！

測試驅動的遷移

一半的時間將用於測試整個應用程序，因此您最好盡可能將其自動化。根據我們的經驗：

• 單元測試不是很有用，因為它們通常測試與 Vue 沒有真正關聯的東西（例如僅“純 JS”函數），所以我們沒有關注它們
• 使用 vue-test-utils 進行組件測試遷移起來很痛苦，最後我們甚至不得不禁用其中一些
• 端對端測試是最有價值的，因為它不依賴任何 JS 或 Vue 內部，一旦應用程式中出現錯誤就會失敗

總之，最好的方法是創建所謂的“冒煙測試”，您只需在應用程式中使用您能想到的最基本的場景進行導航即可。讓它們保持簡單，這樣它們就會很快，因為你越早讓它們運行，它們就會越有用。如果它們在合併之前運行（例如在 CI 中），則會獲得獎勵點。

輸入所有內容

TypeScript 有一點幫助，但 Vue 2 對它的支援仍然很差。使用 TypeScript 仍然是一個好主意，但可能沒有太大幫助；一旦使用 Vue 3，設定語法將是你最好的朋友！

清理一切

這是顯而易見的，但是程式碼中會發生很多變化，也會出現很多錯誤。一個簡單的 ESLint / Prettier 可以節省大量時間。如果您已經有了它們，您可以在遷移的同時檢查 Vue 3 的新規則：https://eslint.vuejs.org/rules/

使用Vite

在開始遷移 Vue 之前，我們已經從 Webpack 遷移到了 Vite，所以我不確定它有多大幫助，但由於它是今天的明確標準，一些插件甚至可能不會給出使用 Webpack 升級的說明。我想先這樣做比較安全，因為 Vite 支援 Vue 2，但相反 Vue 3 生態系統可能不支援 Webpack。

---

2️⃣先小步走

目標是在實際升級 Vue 本身時盡可能減少變更。

升級依賴

查看您使用的每個 Vue 相關依賴項，檢查是否有同時支援 Vue 2 和 Vue 3 的版本，然後升級到它。 Vue-demi 幫助許多外掛程式維護者實現了它，所以它很有可能可用。

例如，您可能想從 Vuex 遷移到 Pinia，它支援這兩個版本（Vuex 仍然需要小規模遷移）並且無論如何都是新標準。

替換依賴項

對於其他依賴項，您可能需要檢查是否有任何現代替代方案可以滿足您的需求。例如，我們用 vue-use 取代了 vue-mq。

需要時使用猴子補丁

我們必須務實，因此由於某些遷移比其他遷移更困難，我們最終創建了一個小的抽象層來修復它。例如，我們在 vue-i18n v9 上遇到了困難，它帶來了一些（有時沒有記錄的）重大更改。因此，我們最終創建了一個幫助程序，它公開了 $t 的自訂版本，以防止必須重寫每個元件（因為這個最常用的函數現在基本上沒有理由不接受「nullish」值）。換句話說，不要太完美主義！

---

3️⃣ 開始遷移

現在艱苦的工作開始了。我們之前所做的一切都會減輕痛苦。這裡沒有魔法，這可能是遷移中最困難的部分。

改變一切，但什麼也改變不了

按照說明使用「遷移建置」（也稱為相容模式）將 Vue 2 替換為 Vue 3。

關閉所有可用的標誌，以便應用程式的運行幾乎與版本 2 相同。

檢查是否沒有重大變更影響您的應用，或修復它們。

小步驟

逐步啟用每個標誌並徹底測試應用程式。如果某些元件太難遷移，請記住您可以覆蓋其相容性選項；因此，您最好合併所有內容，但保留一些元件以便稍後遷移，而不是等待整個應用程式立即執行。不要試圖立即修復所有問題，要等幾天才能發現任何錯誤（並為您的心理健康充電）。

大步

有些依賴項不提供捷徑。在我們的例子中，將 UI 庫從 ElementUI (Vue 2) 遷移到 ElementPlus (Vue 3) 很困難，無法分成更小的步驟。我聽說 Vuetify 更難。為此，你必須堅強、有耐心，並花時間一次完成這一切。也許在你的團隊日曆中留出整整一周的時間！

請記住，您仍然可以覆寫在執行時間匯入的每個元件的相容性行為：

import { ElButton } from 'element-plus'

ElButton.compatConfig = {
  FEATURE_ID_A: true // features can also be toggled at component level
}

最後一步

開啟每個標誌後，就可以刪除遷移建置了。希望您現在不會發現新的意外問題！

別忘了慶祝，你應得的！ ？

以上是我們如何從 Vue 遷移到 Vue 3的詳細內容。更多資訊請關注PHP中文網其他相關文章！