10个为您的下一个Web应用程序使用Nuxt.js的理由

如果你是一个Vue开发者，可能你听说过Nuxt.js。但是你可能不太知道关于它的所有炒作。你可能会问，为什么我要在一个框架里面再用一个框架，Vue已经让开发JavaScript应用变得很容易了，Nuxt.js背后的想法是什么？

这篇文章，我们将讲述为什么要在你的下一个项目中使用Nuxt的10个原因。

Nuxt.js 是什么?

Nuxt.js是一个更高级的框架，它构建在Vue之上。 它简化了通用或单页Vue应用程序的开发。

Nuxt.js抽象出服务器和客户端代码分发的细节，以便您可以专注于应用程序开发。 Nuxt的目标是让它足够灵活，可以作为主要的项目基础使用。 由于大部分Nuxt在开发阶段都会发生，因此只需要少量的额外千字节被添加到JavaScript文件中，您就可以获得很多功能。

让我们来探索一下为什么你需要考虑在你的下个Vue项目中要使用Nuxt的原因。

1. 轻松创建通用应用程序

Nuxt.js的一个最大的卖点就是创建通用应用程序从未如此简单

什么是一个通用应用程序?

一个通用应用程序用于描述可在客户端和服务器端执行的JavaScript代码。很多现代的JavaScript框架，比如说Vue，旨在创建单页面应用(SPAs)，在传统网站上使用SPA有很多好处网站程序是什么，比如说，您可以构建快速更新且运行快速的用户界面。 但是，SPA还具有诸如加载时间长的缺点，并且谷歌正在与他们斗争，因为页面上最初没有内容用于搜索引擎优化目的。 所有的内容都是在事后用JavaScript生成的。

一个通用的应用程序是关于有一个SPA，但不是有一个空白的index.html页面，而是在Web服务器上预加载应用程序，并发送渲染的HTML页面作为对每条路线的浏览器请求的响应网站程序是什么，以加快加载 并通过使Google更容易抓取网页来改进SEO。

Nuxt.js让你写一个通用应用程序更加简单

构建通用应用程序可能很乏味，因为您必须在服务器端和客户端都进行大量配置。

这是Nuxt.js旨在解决Vue应用程序的问题。 Nuxt.js使得在客户端和服务器之间共享代码变得简单，因此您可以专注于应用程序的逻辑。

Nuxt.js允许您访问组件上的isServer和isClient等属性（)，以便您可以轻松决定是在客户端还是在服务器上呈现某些内容。 还有一些特殊的组件，如no-ssr组件()，用于故意阻止组件在服务器端呈现。

最后，Nuxt使您可以访问组件内部的[asyncData方法]（），您可以使用它来获取数据并在服务器端渲染数据。

这是Nuxt如何帮助您创建通用应用程序的冰山一角。 [点击此处]（）了解更多关于Nuxt提供的渲染Universal应用程序的信息。

2. 静态渲染您的Vue应用程序，并获得通用应用程序的所有优势，而无需服务器

Nuxt最大的创新在于它的nuxt generate命令。 该命令会生成一个完全静态的网站版本。 它会为您的每条路由生成HTML，并将其放入其自己的文件中。 例如，如果您有以下页面（Nuxt的路由术语）：

-| pages/----| about.vue----| index.vue

Nuxt将会为你生成一下文件结构：

-| dist/----| about/------| index.html----| index.html

这样做的好处与通用应用程序的优点非常相似。 有标记可以使网页更快加载，并帮助搜索引擎和社交媒体抓取工具抓取网站。

不同之处在于你不再需要服务器。 一切都在开发阶段产生。

它功能强大，因为您可以在不需要服务器的情况下获得通用渲染的好处。 您可以将您的应用程序托管在GitHub Pages或Amazon S3上。

了解关于更多静态生成 (预渲染)部分在Nuxt.js文档

3. 获取自动代码分割（预渲染页面）

Nuxt.js能够使用特殊的Webpack配置生成您的网站的静态版本。

对于静态生成的每个路由（页面），路由也会获取自己的JavaScript文件，只需运行该路由所需的代码即可。

这对速度确实有帮助，因为它可以保持JavaScript文件的大小相对于整个应用程序的大小。

4. 通过命令行使用入门模板进行设置

Nuxt.js提供了一个名为starter-template的入门模板，它为您提供所需的所有脚手架，以便您可以开始使用具有良好文件夹结构的项目。

确保你已经安装了vue-cli，然后运行如下命令：

$ vue init nuxt-community/starter-template

从那里只需cd进入应用程序并运行npm install，这应该很容易。