我们如何从 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中文网其他相关文章！