什么是Nuxt？

Nuxt 是一个建立在 Vue 之上的框架，它允许我们克服单页应用程序（又名 SPA）的一些固有问题。

为什么我们需要Nuxt？

具有搜索引擎优化（又名 SEO）的 SPA 的主要问题。这本身就是一个大话题，但要点是它的网页包含各种信息，搜索引擎机器人在索引页面时可以读取这些信息。可以索引的信息越多，搜索引擎找到该页面的机会就越大。

Nuxt通过a）在服务器端生成内容，并将完全呈现的HTML发送到模板，或b）生成静态HTML页面来解决这个问题，这是向浏览器提供内容的最快方法。

让我们快速讨论这两种方法。

有两种流行的方法可以启动现代 Web 项目。首先是服务器端渲染，简称SSR。当客户端向服务器发出请求时，SSR 会在服务器上实时呈现页面。由于页面是实时呈现的，因此它将始终是最新的。

相比之下，静态站点生成（简称 SSG）在构建时（即部署网站之前的时间）呈现网站的所有页面。由于我们的页面已经预先呈现，因此当客户端发出请求时，它只需要发回正确的页面即可。与 SSR 不同，服务器上没有实时渲染;它在构建时就得到了处理，所以它更快。

此外，由于没有 API 或数据库连接，并且没有登录名和用户帐户，因此不存在安全问题。

在课程结束时，我们将演示如何以两种方式部署您的站点。

Nuxt还提供哪些其他功能？

其中一个主要好处是Nuxt预先配置了合理的默认值。使用常规的 Vue 应用程序，您将不得不进行更多的手动配置。例如，Nuxt 已经包括 Vue Router 和 Vue Meta 等。

Nuxt 的一个主要功能是路由的生成方式。在 Vue SPA 中，用户负责在大型配置文件中为应用程序和相关组件创建各种路由。Nuxt 使用 /pages 目录下的文件夹结构来自动为您配置 Vue Router 并生成您的 URL。例如，如果你创建 /pages/about.vue ，你可以访问 about.vue 的内容 at <a href="http://mysite.com/about" target="blank">mysite.com/about</a> 还有其他几个选项，我们稍后将讨论，但这种方法的美妙之处在于，你所要做的就是创建你的目录和组件，Nuxt 为你处理路由配置。

大型网站的另一个常见需求是自定义布局。例如，您可能希望为首页设置布局，为文章页面设置另一个布局，为产品页面设置另一个布局，为常见问题解答页面设置另一个布局。使用Nuxt，您可以轻松创建自定义布局，然后根据需要将它们应用于您的组件。

我们将在本课程中涵盖的内容

•  安装 Nuxt
• 编辑组件内容
• 创建自定义布局
• 使用目录结构定义 URL
• 将动态值从 URL 传递到组件
• 使用来自外部 API 的数据
  • 创建服务器 API 端点
  • 用于 useFetch 获取数据
• 使用组合 API

 先决条件

• 安装了 nodejs 的计算机
• 代码编辑器（我们将使用 Visual Studio 代码）
• 基本熟悉Vue.js

在下一课中，我们将安装 Nuxt，并讨论一些目录结构。