Nuxt.js是一个构建在Vue.js之上的前端框架，它提供了强大的开发功能，如服务器端渲染、自动生成路由、改进的元标记管理和SEO改进。Nuxt.js我们的前端团队并没有真正考虑使用Nuxt.js作为客户端的主要技术，直到最近我们收到了一个具有许多非常具体的功能的独特项目的请求。由于这也是我们团队的几位成员第一次使用Nuxt.js，所以我决定写这篇博客来解释它是如何为我们工作的。为什么使用Nuxt.js而不是Vue？Nuxt.js为前端开发人员提供了很多好处，但有一个关键特性让我们最终决定使用这个框架——SEO改进。我们的应用程序需要此功能，因为它不是典型的内部SPA（单页应用程序）。这是一个公共Web应用程序，包括社交共享功能和管理功能。说到社交分享，Nuxt.js有很好的元标签管理，因此我们可以根据从后端接收的数据轻松创建特定的、可定制的社交分享窗口。那么，SEO改进是如何工作的呢？为了改进SEO，Nuxt.js使用SSR（服务器端渲染）。SSR在获取AJAX数据后将Vue.js组件渲染为服务器（Node.js）上的HTML字符串。完成所有异步逻辑后，它将它们直接发送到浏览器，然后最终将静态标记提供给客户端上的完全交互式应用程序。此功能允许使用GoogleSEO解析器很好地解析DOM元素。SEOParser在加载网站DOM后立即以极快的速度解析DOM元素。另一方面，一个典型的SPA应用是用Vue.js、React、Angular等框架构建的，都是在加载DOM后使用AJAX从后端获取数据，所以SEO解析器无法解析所有的DOM元素,因为它们还没有被渲染。AJAX抓取是异步的，而SEO解析不是。Nuxt.js需要与Vue不同的思维方式Nuxt.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，您可以轻松地将自己的逻辑添加到路由器、导入服务，并且比手动生成的路由器对路由管理有更多的控制权。该原理更耗时且更复杂，但这并不总是意味着它更糟。Nuxt.js准备好用于企业应用程序了吗？过去有两个主要因素导致Nuxt.js无法用于企业级应用程序：套件或值得冒险的配置。由于大量的linting错误和缺失类型，我们决定使用VanillaJS(ES6+)。同时，对Nuxt.js的Typescript支持得到了极大的改进，现在可以使用新的入门套件和配置，而不必担心Typescript相关的问题。糟糕的服务器端错误处理是我们在开发Nuxt.js应用程序时必须处理的最大、最苛刻的问题。当代码在Nuxt.js服务器(Node.js)端执行时，应用程序会抛出非常不相关的错误消息，调试和修复这些相同的错误确实非常困难和复杂。为了简化调试，需要在Node.js端对错误进行特定的处理。现在，有了更好的Typescript支持和对SSR的更深入理解，我可以有把握地说Nuxt.js已经为中型和企业应用程序做好了准备，但仍有改进的空间——比如在Nuxt的Node.js端提供了更好的错误处理和AJAX管理。Nuxt应用程序结构Nuxt.js的架构与Vue.js非常相似。只有两个主要区别：RouterMainApp.vuecomponentNuxt根据页面的目录和文件结构生成路由器逻辑及其路由。比如我们创建一个目录和文件about/index.vue，Nuxt.js会自动为页面创建一个路由/about。无需在应用程序的其他任何地方定义或配置路由。对于嵌套路由，只需在父目录中创建一个目录-about/me/index.vue将生成about/me路由。要创建动态嵌套路由或嵌套路由参数，您需要做的就是使用lodash前缀命名子目录-user/_id/index.vue将根据用户的ID创建动态嵌套路由。Nuxt.js的另一个与结构相关的特性非常有趣——布局。Vue.js应用程序有一个主App.vue文件，它是所有应用程序组件的主要根组件包装器。Nuxt.js使用布局，其中每个布局都充当应用程序组件的单独包装器。例如，如果我们希望某些特定页面使用不同的UI库、全局CSS样式、字体系列、设计系统、元标记或其他元素，我们可以定义使用什么布局作为其父根组件。默认情况下，所有Nnux.js页面都使用default.vue布局。Nuxt.js中Vuex的结构与通常的Vue.js环境几乎相同——带有store模块。这种结构是可选的，但强烈建议使用它以获得更好的结构和代码维护。每个商店都应该基于应用程序逻辑和数据流进行结构化和模块化。例如，如果应用程序包含授权逻辑，那么我们必须创建一个授权存储模块来存储所有授权数据和逻辑，例如登录、注销、cookie、令牌、用户数据等。总结首先，开发你的Nuxt.js项目一开始肯定会令人困惑和复杂，特别是如果你有Vue.js背景但对SSR一无所知。然而，就像任何其他技术一样，需要时间、反复试验和大量编码实践才能真正理解Nuxt.js框架的功能和优势。至于我，我热切地等待我的下一个Nuxt.js项目，在那里我将使用我获得的知识（并且希望是Typescript），而不会遇到我在任何障碍之前工作过的Nuxt.js+Typescript项目。Nuxt.js是一个非常强大的框架，具有许多有用的特性，可以使开发前端应用程序变得更加轻松和有趣。但请记住，它并不是所有类型的客户端应用程序和网站的最佳选择。那么，要回答主要问题——Nuxt.js还是Vue.js？答案是您必须了解每种方法的优缺点，并且还需要根据项目类型、目标和要求知道何时使用一种方法。Nuxt.js的服务器端渲染功能、用于快速开发的自动通用路由器、公共共享功能和具有出色配置选项和元标记方法的管理、使用预渲染页面自动代码拆分以更好地改进SEO。Vue.js要么不可能，要么极其复杂。如果您的下一个项目需要这些功能，我向您保证Nuxt.js将是一个不错的选择。另一方面，如果您的目标是内部产品，典型的客户端SPA，不需要SEO率和性能，那么Vue是最明显的选择。因为它在处理所有这些方面远远优于Nnux.js。
