开始使用Nuxt.js进行服务器端渲染

Nuxt.js 是一个强大而简单的框架，旨在使用 Vue.js 创建通用的服务器端渲染应用程序。灵感来自Next； React 的服务器端渲染 (SSR) 框架。 Nuxt 由 Alex & Sébastien Chopin 创作，并在 2017 年获得了大量关注。如此之多，以至于肖邦兄弟已经成为 Vue.js 社区中服务器端渲染的传道者，特别是在 VueConf 2018 和 Vue.js 阿姆斯特丹谈到服务器端渲染。

Nuxt 和服务器端渲染可以被认为是它自己的独立技术，并且可以专门写一本书。本文是 Nuxt.js 的简要概述，以便您更好地理解它和一般的服务器端渲染。

为什么选择服务器端渲染？

这一切都很好，但是，什么是服务器端渲染 (SSR)，你为什么要关心？好吧，单页应用程序存在一个大问题：许多搜索引擎无法按预期抓取您的应用程序……但是。如果 SEO 需要为您的应用程序的成功发挥重要作用，这将是一个大问题。诚然，谷歌的算法近年来进行了更新，以更好地处理这些新体验，但它并不十分完美。除此之外，服务器端渲染也更快并提高了性能，这对于您的应用程序的 SEO 也很重要。

[T] 单页应用程序存在一个大问题：许多搜索引擎无法按预期抓取您的应用程序……但是。如果 SEO 是您的应用程序开发过程的重要组成部分，这将是一个大问题。

安装 Nuxt.js

使用 Nuxt 很容易启动和运行。您只需启动 Vue CLI。如果您以前使用过 Vue CLI，那么您会非常熟悉 Nuxt 命令和架构。如果您没有安装 CLI，您可以使用 $ npm install vue-cli 轻松安装。安装后，使用以下命令使用 Nuxt 入门模板初始化应用程序：

$ vue init nuxt-community/starter-template <project-name>
$ cd <project-name>
$ npm install

# Launch the project
$ npm run dev

您应该会在浏览器中看到 Nuxt 的动画徽标以及您使用 CLI 设置定义的应用程序标题和描述。

Nuxt 的架构

就像 CLI 命令一样，Nuxt 的架构类似于 Vue.js 2，除了 pages、middleware、plugins 和 [ X158X] 目录。所有这些文件都像您在传统的 Vue 应用程序中所期望的那样工作。如果您在 Nuxt 冒险过程中的任何时候感到迷茫，Nuxt 社区会在每个目录中添加很棒的 README.md 文件以及文档链接。

布局目录

layouts 目录定义了您的应用程序可以使用的所有各种布局。这是添加在您的应用程序中使用的通用全局组件的好地方，例如页眉和页脚。您应该在此文件中包含您不想一遍又一遍地为每个新页面重新定义的组件。

如果您熟悉 WordPress，可以将布局与 WordPress 中的页面模板进行比较。默认情况下，用于 pages 目录中的 .vue 文件的默认模板是 default.vue。需要 <nuxt/> 元素来注入页面的所有组件、文本、资产和数据。

创建新布局

要创建一个新的 Nuxt 布局，就像创建一个新的 .vue 文件一样简单。例如，如果您想创建一个博客布局，您可以通过将文件 blog.vue 添加到 layouts 目录来创建一个新布局。从那里，您可以添加您可能拥有的任何博客特定组件，甚至包括 props 或 Vuex 商店中的数据。

请记住在布局中包含 <nuxt/> 标签。

页面目录

pages 目录非常复杂。使用 Nuxt，没有路由器文件。相反，Nuxt 将为 pages 目录中的每个新 .vue 文件生成一个新路由。您甚至可以通过在目录或 .vue 文件中添加下划线 (_) 来获得动态路由。

例如：

|__ pages/
   |__ users/
      |__ _id.vue

会产生…

router: {
  routes: [
    {
      name: 'users-id',
      path: '/users/:id?',
      component: 'pages/users/_id.vue'
    },
  ]
}

默认情况下，此目录中的每个文件都使用 layouts 目录中的 default.vue 布局。但是，您可以通过添加 layout 属性轻松地将其更改为您可能已创建的另一个布局。

<script>
export default {
  layout: 'blog'
}
</script>

当然，其他几个属性可以添加到 Nuxt 页面。

中间件目录

middleware 目录包含所有中间件；在我们的布局呈现页面之前运行的一组自定义函数。

一个真实的中间件示例是每次加载包含安全数据的页面时对用户进行身份验证。换句话说，每次用户访问需要身份验证的路由时，都会运行一个自定义中间件函数，根据用户是否登录返回一个布尔值。如果没有，请将它们路由到 /login 路由，以便用户可以登录并返回该页面。

插件目录

plugins 目录用于在实例化根 Vue 应用程序之前添加要加载的 JavaScript 插件。该目录或多或少是存储插件文件的地方，例如 vue-notifications。下面的例子来自 Nuxt 文档。

如果我们想在我们的应用程序中显示通知，我们需要在应用程序呈现之前对其进行初始化。

插件/vue-notifications.js

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

nuxt.config.js

module.exports = {
  plugins: ['~/plugins/vue-notifications']
}

页面动画和加载栏

关于 Nuxt，我最喜欢的一件事是开箱即用的动画支持！通过使用一些内置的 CSS 类，您可以轻松地在页面内外设置动画。页面之间的动画真的可以让你的应用程序感觉流畅和有凝聚力。如果您希望页面在路由之间淡入淡出，您可以执行以下操作：

.page-enter-active,
.page-leave-active {
  opacity: 1;
  transition: opacity .25s;
  animation-duration: .3s;
  animation-fill-mode: both;
}

.page-enter-active {
  animation-name: pageFadeInUp;
}

.page-leave-active {
  animation-name: pageFadeOutDown;
}

.page-enter, .page-leave-to {
  opacity: 0;
}


@-webkit-keyframes pageFadeInUp {
  0% {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@-webkit-keyframes pageFadeOutDown {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(0, 1.25%, 0);
  }
}

更改加载栏颜色

要更改加载栏的颜色，请修改 nuxt.config.js 文件内的 loading 对象中的 CSS。

nuxt.config.js

loading: { color: '#3B8070' },

为组件禁用 SSR

有时，出于多种原因之一，您不希望页面或组件在服务器端呈现。 Nuxt 让这个非常变得简单。如果要在客户端渲染组件，只需添加 <no-ssr> 标签。

<template>
...
  <no-ssr>
    <some-component />
  </no-ssr>
...
</template>

结论

如您所见，Nuxt 涵盖了很多，但希望您现在已经大致了解 Nuxt 的工作原理、它的重要性以及如何使用 Nuxt 构建您的下一个 Web 应用程序。

如果您正在寻找有关它的更多信息，Nuxt 拥有很棒的文档以及大量示例以及社区入门模板本身。如前所述，梦幻般的社区在每个目录中添加了 README.md 文件，其中包含附加信息和指向特定于该目录的文档的链接。