Nuxt.js胜过Vue.js：您应该在什么时候使用它，为什么使用它

js是一个构建在Vue.js之上的前端框架，它提供了很棒的开发功能，比如服务器端渲染、自动生成的路由、改进的元标签管理和SEO改进。

我们的前端团队并没有真正考虑使用Nuxt.js作为客户端的主要技术，直到我们最近收到了一个具有许多非常具体功能的独特项目的请求。因为这也是我们团队中的几个成员第一次使用Nuxt.js，所以我决定写这个博客来解释它是如何为我们工作的。

js为前端开发人员提供了很多好处，但是有一个关键特性让我们最终决定使用这个框架-SEO改进。我们的应用程序需要此功能，因为它不是典型的内部SPA(单页应用程序)。这是一个包含社交分享功能和管理的公共网络应用程序。

说到社交分享，Nuxt.js有很好的元标签管理，因此我们可以根据从后端接收的数据轻松地创建特定的、可定制的社交分享窗口。这是其中一个例子。

为了提高SEO，Nuxt.js使用SSR(服务器端呈现)。SSR正在获取Ajax数据，并在服务器(Node.js)上将Vue.js组件呈现为HTML字符串。当所有异步逻辑完成后，它会将它们直接发送到浏览器，然后最终将静态标记提供给客户端上的一个完全交互的应用程序。该特性允许使用Google SEO解析器对DOM元素进行很好的解析。当加载网站DOM时，SEO解析器立即以极快的速度解析DOM元素。

另一方面，使用Vue.js、Reaction、Angel等框架构建的典型SPA应用程序在加载DOM之后使用Ajax从后端获取数据，因此SEO解析器无法解析所有的DOM元素，因为还没有呈现。Ajax抓取是异步的，而SEO解析不是。

js和Vue.js处理逻辑的方式非常不同。主要区别在于Vue总是在客户端运行，而Nuxt不是，这在某些情况下可能会导致重大问题。例如，如果您想要在加载应用程序之后立即选择DOM元素，则应用程序可能正在Node.js端运行，当然，Node.js中没有DOM元素。

访问浏览器的本地存储时也会发生同样的情况。这就是Nuxt使用cookie而不是本地存储的主要原因-因为它们总是可以访问的。

使用VUE，我们没有这些问题，因为它总是在客户机上运行，因此我们不必担心那些潜在的问题。

让我们看看如何在Vue中处理这种类型的潜在问题，以及如何在Nuxt中做到这一点-通过实际的代码示例。

这张图中最重要的是“Created”方法的提前返回。Nuxt有一个全局可访问的对象“进程”，它向我们显示我们当前是在服务器端还是在客户端运行。我们看到的代码背后的逻辑侧重于管理套接字连接，如果我们在服务器上运行，显然我们不想在接收套接字事件时更新DOM，因为服务器端没有DOM。如果这是一个Vue.js应用程序，代码将是相同的，除了早期返回部分-因为进程将始终在客户机上运行，并且永远不需要检查该特定语句。

Nuxt.js根据文件夹结构生成自己的路由器，而使用Vue.js则必须手动完成-但请记住，这两种原则各有优缺点。自动生成的路由器的优点是创建它更容易、更快。您只需创建目录和文件，Nuxt就可以完成所有工作。但缺点是，与手动编写的相比，它的可控性和可管理性较差。

使用Vue.js，您可以轻松地将自己的逻辑添加到路由器、导入服务，并且比手动生成的路由器拥有更多的路由管理控制权。这个原则更耗时、更复杂，但这并不总是意味着它会变得更糟。

当我们处于项目的研究阶段时(大约6个月前)，还没有值得冒险使用的可靠的打字入门工具包或配置。有很多的皮棉错误和丢失的类型，所以我们决定使用香草JS(ES6+)。同时，对Nuxt.js的TypeScript支持有了很大的改进，现在有了新的入门工具包和配置，可以随时使用，而不用担心与TypeScript相关的问题。

糟糕的服务器端错误处理是我们在开发Nuxt.js应用程序时必须处理的最大、最苛刻的问题。当代码在Nuxt.js服务器(Node.js)端执行时，应用程序抛出非常无关的错误消息，调试和修复同样的错误非常困难和复杂。为了简化调试，有必要以特定方式处理Node.js端的错误。

现在，有了更好的类型脚本支持和对SSR更深入的理解，我可以可靠地说Nuxt.js已经为中型和企业级应用程序做好了准备，但是仍然有改进的空间-比如Nuxt的Node.js端的更好的错误处理和Ajax管理。

Nuxt根据页面的目录和文件结构生成路由器逻辑及其路由。例如，如果我们创建一个目录和文件“about/index.vue”，Nuxt.js会自动为该页面创建路由“/about”。不需要在应用程序中的任何其他位置定义或配置路由。

对于嵌套路由，只需在父目录内创建一个目录-“about/me/index.vue”将生成“about/me”路由。要创建动态嵌套路由或嵌套路由参数，所有需要做的就是命名带有LOCASH前缀的子目录-“user/_id/index.vue”将根据用户的id为用户创建动态嵌套路由。

js还有一个非常有趣的与结构相关的特性-布局。js应用程序有主App.vue文件，它是所有应用程序组件的主根组件包装器。js使用布局，其中每个布局都充当应用程序组件的单独包装器。例如，如果我们希望某些特定的页面使用不同的UI库、全局CSS样式、字体系列、设计系统、元标签或其他元素，我们可以定义使用什么布局作为其父根组件。默认情况下，所有Nuxt.js页面都使用default.vue布局。

Nuxt.js中的Vuex的结构与通常的Vue.js环境几乎相同-带有存储模块。这种类型的结构是可选的，但强烈建议您进行更好的结构和代码维护。每个商店都应该根据应用程序逻辑和数据流进行结构化和模块化。例如，如果应用程序包含授权逻辑，我们必须创建授权存储模块来管理所有授权数据和逻辑，如登录、注销、cookie、令牌、用户数据等。

开发您的第一个Nuxt.js项目一开始肯定会令人困惑和复杂，特别是如果您有Vue.js背景而没有SSR知识的话。但就像任何其他技术一样，要真正理解Nuxt.js框架的功能和好处，需要时间、错误和大量代码。对我来说，我热切地期待着我的下一个Nuxt.js项目，在那里我可以使用我学到的知识(希望还有打字脚本)，而不会遇到我之前参与的Nuxt.js+TypeScript项目的任何障碍。

如果您有兴趣了解有关Nuxt.js的更多信息，我强烈建议您查看以下来源：

js是一个非常强大的框架，具有许多有用的特性，使前端应用程序的开发变得更容易、更有趣。但请记住，它并不是所有类型的客户端应用程序和网站的最佳选择。

那么，回答主要问题-Nuxt.js还是Vue.js？答案是，您必须了解每种方法的优点和缺点，还需要根据项目类型、目标和要求知道何时使用一种方法而不是另一种方法。

Nuxt通过其服务器端渲染功能提供了更好的SEO改进，通过自动通用路由器加快了开发速度，通过出色的配置选项和meta标签方法提供了公共共享功能和管理，通过预先渲染的页面自动拆分代码-所有这些都是Vue.js不可能或极其复杂的。如果您的下一个项目需要这些功能，我向您保证Nuxt.js将是一个很好的选择。

另一方面，如果您的目标是内部产品、扩展的代码管理和覆盖范围、典型的客户端SPA、不需要SEO速率和性能，以及手动代码逻辑胜过通用解决方案，那么显而易见的选择是Vue.js，因为在处理所有这些方面，Vue.js远远优于Nuxt.js。

_。如果您有什么想法想要讨论，请与我们的团队分享！