【Nuxt.js扩展Vue】Vue应用程序使用Nuxt.js可以避免的7个问题

众所周知使用Nuxt.js可以扩展Vue，为什么要使用Nuxt.js？今天给大家分享些知识，供大家参考学习。

Vue应用程序使用Nuxt.js可以避免的7个问题。

Vue.js是您应用程序框架的绝佳选择。但是，您可能会遇到几个问题：

• 如何合并和配置我的所有JavaScript＆Vue库以有效地协同工作？

• 如何使用最佳实践来构造应用程序代码？

• 如何确定我的应用程序已被搜索引擎正确索引？

• 如何优化Vue应用程序的速度？

这些是Sebastien和Alexandre Chopin在创建Nuxt.js时要解决的一些问题，Nuxt.js是基于Vue构建的高级框架，可帮助您构建可用于生产的Vue应用程序。

我想让您解决构建Vue应用程序时遇到的7个问题，并告诉您Nuxt如何解决它们。

问题1：从头开始构建可投入生产的Vue应用程序很困难

Nuxt不仅预先配置了Vuex，Vue Router和Vue-Meta，而且还基于经过深入研究的最佳实践（Vue不会给您开箱即用）的智能默认设置来设置您的项目。

创建Nuxt应用程序就像键入一样简单：

此Nuxt入门工具包将询问您要用来启动项目的库，例如CSS Lint，以及要使用的CSS框架。

问题2：没有标准的文件夹结构

随着应用程序的增长，代码组织变得越来越重要。Vue的默认构建为您提供了一个资产和组件目录，这是一个好的开始。Nuxt.js根据最佳实践为您设置其他文件夹，例如：

一个pages为你的应用程序的意见和路线目录。

layoutlayouts您的布局模板的目录。

vstoreVuex存储文件的目录。

Nuxt附带了更多文件夹和更多默认约定，它们都是可配置的，但是您可以理解。

由于一切都有其位置，因此以开发人员的身份从一个Nuxt应用程序迁移到另一个应用程序并快速上手是非常简单的。

问题3：大型Vue应用中的路由配置可能会很长

使用Nuxt，您只需将单个文件Vue组件放入pages文件夹，Nuxt便会自动以零配置生成路由。

这只是Nuxt如何为您提供创建生产就绪Vue应用程序所需的预配置的又一个示例。这导致我们遇到大型应用程序的下一个问题……

问题4：没有标准的方法可以一起配置所有东西

幸运的是，Nuxt附带了可以将产品锁定的生产就绪配置。这 意味着，如果您要覆盖任何智能默认值或预配置，则可以编辑nuxt.config.js文件并修改框架的任何内容。选项。

问题5：Vue应用程式不适合SEO

您将需要搜索引擎正确索引应用程序的某些页面，以便轻松发现它们。

最好的解决方案之一是在服务器上预渲染Vue页面，但是要自行设置可能很棘手。Nuxt已预先配置为在服务器上生成您的应用程序，以及为您的路由加电以使其易于添加与SEO相关的标签。

问题6：初始负载下的Vue应用程序运行缓慢

如果您选择使用Nuxt.js通用还是静态呈现应用程序，则预呈现的HTML会导致您的页面在浏览器中的加载速度更快。加载后，它将开始作为普通SPA运行。加上自动代码拆分功能，它只会加载实现路由功能所需的JavaScript。

这带来了最佳的用户体验。

问题7：使用Vue应用程序，您可能会发现很难更改框架的行为

在开发生产级应用程序时，有时需要更改框架的行为。Nuxt提供了一个高阶模块系统，可以轻松自定义Nuxt的各个方面。

结论

这样就可以解决Nuxt为您解决的7个问题。如您所见，Nuxt.js允许您花费更少的时间进行配置，而将更多的时间用于解决问题和构建出色的Vue应用程序。

为了开始使用Nuxt，我们建议您查阅出色的文档，并考虑下载Vue Mastery Nuxt备忘单。这样，当我们开始发布Nuxt课程的其他课程时，您也会收到通知。