从 Vue 2 迁移到 Nuxt 3?

Ole*_*ndr 4 javascript vue.js nuxt.js nuxtjs3

有一个用 Vue 2.7 编写的中型应用程序(vuex、vue-router 等)。

直到某个时刻,我们“用自己的双手”拥有了 SSR。工作方式弯曲且缓慢,但有效。

最近,它已经无法满足项目的需求,我们意识到我们将迁移到 Nuxt。

最近,Nuxt 3 发布了。现在处于 rc 状态。我们押注Nuxt的进一步发展。因此,我们希望迁移到版本 3。另外,我认为在不久的将来我们会考虑切换到 TypeScript,并且在 Nuxt 3 中 TS 支持处于良好的水平。

但有一个歧义:Nuxt 3 可以与 Vue 3 配合使用。另外,建议使用 pinia 而不是 Vuex。

对此,提出疑问:

  1. 使用 Nuxt 3 时,大多数组件可以在 Vue 2 上运行吗?我也想迁移到 Vue 3,但现在我们希望尽可能加快这个过程。但我也不想使用“Vue 3 Migration Build”这样的拐杖。
  2. Pinia 最终会取代 Vuex 吗?我的意思是,Vuex 很快就会过时吗?
  3. 也许在搬家之前您应该了解更多陷阱?

kis*_*ssu 6

我首先会从 Vue2 迁移到 Nuxt2,这是最简单+最快的方法,没有太多破坏部分。这样,您至少可以受益于一些 SSR 功能,直到整个迁移完成。

然后,正如Estus Flask 所说,主要问题将是软件包本身(例如 Vuetify,在稳定状态下仍然不完全兼容 Vue3)。

此外,您可以完全迁移到 Nuxt3,同时将大部分组件保​​留在 Options API 中(无需重构为 Composition API)。

Nuxt3 可在生产中运行,但您可能仍需要根据您计划使用的内容对其进行故障排除。另外,请记住,并非所有模块都已迁移,这是最新的路线图

所以回答你的问题:

  • 根据您的组件现在的情况,您可能需要更新它们的某些部分,有关更多详细信息,您可以查看迁移指南,看看从 Vue2 到 Vue3 时是否会受到这些更改的影响。如果您想更快地迭代(并且以更安全的方式),请首先迁移到 Nuxt2(应该相当快!),然后尝试转向 Nuxt3
  • 与 Vuex 相比,Pinia 几乎在所有方面都更好。未来 18 个月内会无法使用吗?可能不会。它仍然是官方推荐,并且将是总体上的方式(只是总体上更好),但 Vuex 至今仍然完全可用。更多详情可在这找到
  • 与往常一样,您将在 Vue 之上添加一个层,因此它可能会影响几件事:
    • 根据您使用的功能数量(Nuxt 模块、Nuxt 特定模块),某些版本可能需要更多时间才能交付到生产环境(与 Nuxt3 相比,使用 Tailwind 和 Vue3 更早成为可能)
    • Nuxt 是一个元框架,因此正确理解所有 Nuxt2 钩子、同构应用程序的工作方式、如何使用 Vue2 包、一些问题等会带来一定的复杂性……这不是来自 Nuxt 本身,但更多来自 SSR 部分。
    • Nuxt3 使用的是 Vue3,因此您需要更多地了解组合 API 的工作原理,以获得使用useAsyncData 可组合项等的好处……因此也需要进行相同的工作,因此我建议首先过渡到 Nuxt2。当然,这完全取决于您的团队以及您的成员是否已经熟悉 Composition API

总的来说,如果您需要一个生产级解决方案来满足您的 SSR 需求,那么使用 Nuxt 肯定会非常有用,但它也需要一些学习曲线。
您还可以从中获得相当多的 DX,所以这是一个不错的奖励!

此外,Vue 的生态系统中没有与 Nuxt 真正的竞争,因此至少,您不需要完全比较元框架。AstroJS可能是另一种方法,但它总体上脱离了 Vue 生态系统(例如,您不会受益于 Nuxt 的模块/不错的功能)并解决了一些特定需求。

PS:Nuxt 的团队正在研究与仅服务器组件相同的方法以及有关水合作用的重大改进。