tl; dr

这是一篇很长的文章，详细介绍了我将项目从VUE 2到3迁移的旅程。它包含了我所面临的挫折和胜利，并提供了问题的细分。

1.学习vue

我于2021年5月加入了目前的团队，我与之合作的项目是使用VUE 2.6和Vuex 3.4和Plain JavaScript构建的。

vue 3.0已经在那时已经出门了，但是它不是“默认” VUE版本。直到Feb 7, 2022

2.对类型的需求

我是当时的新手，来自React和Typescript代码库。

我的第一个提交是添加一个tsconfig.json只是为了获得一些智能。当时的痛点是Vue 2的Vue.extend对打字稿的支持很差。我想修复它。

该解决方案是由vue-class-component与vue-property-decorator组合的使用。结合两者的组合使我们能够以提供合理量的安全性的方式定义组件。

迁移到类组件是通过逐步完成的，使用类语法编写了任何新功能或组件。每当我们需要修改它们时，都会重构较旧的组件。

我们还将Vscode插件从Vetur切换到具有更好的打字稿支持的Volar。

3.使用Vuex错误

VUEX商店是在“传统” Redux样式商店中配置的。他们有这样的文件结构：

store/
    actions.js
    getters.js
    index.js
    mutations.js
    state.js
    types.js

祝您好运找到合适的商店！或由于没有支持Intellisense的支持而降落在正确的动作/突变上。

这是通过迁移商店使用vuex-module-decorators的方法来解决的，而vuex-module-decorators对打字稿提供了更好的支持。另外，您将在单个文件中获得所有操作/突变/获取器等，因此更容易理解。这也是逐渐完成的。

4.第一次挫折

迁移到Vue 3的可行性中有一个尖峰。它并没有持续很长时间，因为有以下原因：

1. 我们使用了一个内部UI库，该库取决于不兼容或与Vue 3不稳定的组件
   1. vee-validate
   2. v-tooltip
   3. vue-showdown
   4. vue-multiselect
   5. vue-rid-layout
2. 我们无法找到将UI库迁移到VUE 3的合理策略
3. 我们绝对不想在迁移发生时停止运送我们的产品，必须是递增的或快速的。

5. vee-validate和$slots问题

我们面临的最大障碍是vee-validate。这是为VUE构建的表单验证库。痛苦是VUE 2和3的图书馆API完全不同。

您几乎将其称为另一个库，这是由于VUE 3中的新的Breaking $slots实现（稍后再详细介绍）。图书馆的作者也证实了这一点

我们的UI库使用Vee估算材料创建了一个“形式构建器”，该“形式构建器”在我们的应用程序中使用了 30 。我们在这里找不到增量升级路径。我们要么全部迁移它们，要么我们没有迁移。

6. Vue 2和Vue 3之间的$插槽

slots unification的官方迁移文档处理了API差异。但这省略了一个主要事实，在VUE 3中，无法将组件使用的插槽的DOM元素从引用到插槽的引用。

您需要渲染父母，然后使用父级节点获取子插槽选择器。或使用某种注射/提供解决方法。

这是为什么vee-validate库无法使用它的主要原因，更简单的API。

7.新希望

2022年7月1日Vue 2.7发布。它最终将许多功能从VUE 3回到Vue2。这是我们开发中的一个关键时刻，因为我们使用defineComponent提供了固定的打字稿支持。这比Vue-Class组成部分更好，因为它可以使组件类型的推理用于工作。

@matrunchyk做得非常出色的工作creating a codemod，将VUE类组件自动迁移到早期的语法。它不是完美的，但可行。

我对它进行了一些进一步的修改，以使其在我们的项目上工作。如果您想自己尝试：NikhilVerma/vue-codemod，它可以在这里使用。它仍然没有足够的抛光来考虑上游拉的请求，但是您可以用它来闯入您的项目。

我们最终在很短的时间内使用CodeMod迁移到Vue 2.7和defineComponent。还将其用于将大多数代码库迁移到打字稿。这是我们的Jira票中记录的时间表。

同时，我们注意到有几个库依赖关系迁移，以支持3个API变化的VUE 3。这很令人兴奋！

8. VEE验证的解决方案

现在，唯一防止平稳迁移的是vee-validate库。我们很幸运，因为我们的UI团队正在使用LIT撰写的第二版Flow UI库。它还提供了一个替代形式的构建器，可以接管Vee估算的一个。

由于新图书馆是使用lit编写的，所以它是VUE 2/3的不可知论，因此递增的迁移很容易。

9.让我们去做

最终计划已经到位：

1. 用新的点亮>迁移所有旧形式和VEE验证实例
2. 在库中迁移剩余的UI组件以支持VUE 3
3. 将应用程序迁移到单个pr
中的vue 3

第一步花了大约一个月的时间完成，因为必须逐步迁移这些实例。第二步更快，大约一个星期的迁移，因为其他大多数库都具有良好的向后兼容性。

第三个也很容易。 Vue CodeMod提供了很多帮助，Eslint + Typescript抓住了大多数问题。救生员是我们的自动化套件，它确保我们没有破坏应用程序中的任何关键功能。

这是拉动请求的屏幕截图，它将我们的应用迁移到Vue3。（编辑了内部位）

近两年后。我们迁移到Vue 3.，因为我们做好了很好的准备，因此最终合并很顺利。之后我们发现了一些错误，这主要是由于boolean attributes have changed在Vue 3中的方式。

10.后果

从那时起，我们很高兴使用VUE 3。我希望未来的VUE升级将不那么多，并且不需要这样的帖子。

我希望这对您有帮助，我相信还有其他人仍在较大的代码库上使用VUE 2并在较艰难的时期使用。我希望通过分享他们的经验，它将鼓励其他人开始移民旅程。