如何通过 8 个步骤将 VueJs 项目迁移到 NuxtJs。

几个月前，我用我最喜欢的技术栈搭建了一个项目：前端是 VueJs + Buefy，后端是 NodeJs + Express。几天后，网站开始有了些许发展，流量也增加了不少。但正如大家所知，VueJs 的单页应用 (SPA) 并不适合 SEO，因此我决定用 NuxtJS 彻底重建它。

由于我在网上搜索找不到任何文档或教程，所以我会尝试一步一步地解释我的做法。我提前告诉你，这很简单，只需要几个小时，但我假设你对 nuxt 的工作原理有所了解（如果不是这样，我强烈建议你阅读官方文档）。

1.创建nuxt项目

首先，使用 创建 nuxt 项目create-nuxt-app。您可以在此处获取更多信息。

2. 复制你的商店

如果您在 VueJs 项目中没有使用 Vuex，则可以跳过此步骤。如果是这样，您几乎可以将 store 文件复制到/storenuxt 项目中的新文件夹中。就我而言，我只是使用了一个 index.js 文件。如果您已将 store 拆分为模块，则可以按照以下说明操作。

3.复制你的组件

首先，我们必须区分什么是组件，什么是页面。我不知道您使用的是哪种目录结构，但我通常将 .vue 文件分成两个文件夹：/views和/components。这很明显，但在 views 文件夹中，我放置的是页面类型的 Vue 组件（.vue 文件），例如：关于、主页、常见问题解答等。而在 components 文件夹中，我放置的是那些我复用并包含在视图中的子组件。

如果您不遵循与此类似的结构，则必须做出这种区分，然后将组件（非页面）复制到相应的新/components文件夹。

4.创建您的页面

这一次，您应该重新考虑您的页面并按照 Nuxt 指定的约定重新创建每条路线。

Nuxt.js根据目录内的 Vue 文件文件树自动生成vue-routerpages配置。

如果您不知道如何执行此操作，我建议您阅读官方 Nuxt 文档的以下部分：路由和视图。

5. 将 router-link 改为 nuxt-link

将所有组件和页面放置到正确位置后，你需要将所有 router-link 改为 nuxt-link。要了解 nuxt 如何命名路由，你可以查看 nuxt 内部自动生成的文件。/.nuxt/router.js

6. 改变从服务器获取数据的方式

您应该检查所有新页面，并重构从服务器加载数据的方式。

你可能希望获取数据并在服务器端渲染。Nuxt.js 添加了一个asyncData方法，允许你在初始化组件之前处理异步操作。

更多信息请见asyncData 此处。

如果您还在组件中获取数据并尝试使用asyncData，那么这将不起作用，因为组件没有asyncData方法。

但别担心，有两种解决方案：

1. 在钩子中进行 API 调用mounted。请注意，这样服务器端渲染将无法正常工作
2. asyncData在页面组件的或方法中进行 API 调用fetch，并将数据作为 props 传递给子组件。

7.添加插件

前往 VueJs 项目的 main.js 文件，确定你正在使用的插件。然后按照此处的说明设置所有插件。

8.添加外部资源

最后，如果你在 VueJs 项目的 index.html 文件中使用了一些外部资源，例如样式表或外部 js 脚本，则可以将它们包含在 的 head 对象中nuxt.config.js。更多信息请见。

完成所有这些更改后，您可以看到我的新 NuxtJs 项目与旧的 VueJs 相比有何不同（非常相似，对吧？）。

如果你想知道我用 NuxtJs 重建了哪个项目，你可以在这里看到：KnowYourWorth

如果您有任何问题请告诉我，或者通过 Twitter 联系我@ngranja19

干杯