使用Nuxt.js进行简单的服务器端渲染，路由和页面转换-CSDN博客

标题有点罗,，是吗？什么是服务器端渲染？它与路由和页面转换有什么关系？ Nuxt.js到底是什么？有趣的是，尽管听起来很复杂，但与Nuxt.js一起工作并探索的好处并不难。让我们开始吧！

服务器端渲染

您可能听说过最近有人在谈论服务器端渲染。最近，我们研究了一种使用React做到这一点的方法。一个特别引人注目的方面是性能优势。当我们在服务器上呈现HTML，CSS和JavaScript时，通常没有多少JavaScript可以解析初始更新和后续更新。本文对这个主题进行了更深入的探讨，确实非常不错。我最喜欢的外卖菜是：

通过在服务器上进行渲染，您可以缓存数据的最终形状。

与其从服务器中获取JSON或其他信息，然后解析它，然后使用JavaScript创建信息的布局，我们先进行了大量的这些计算，并且仅发送所需的实际HTML，CSS和JavaScript。。这可以从缓存，SEO中获得很多好处，并加快我们的应用程序和网站的速度。

什么是Nuxt.js？

服务器端渲染听起来不错，但是您可能想知道是否很难设置。我最近在我的Vue应用程序中使用了Nuxt.js ，发现使用起来非常简单。需要明确的是：您不需要特别使用Nuxt.js来进行服务器端渲染。由于许多原因，我只是喜欢此工具。我上个月进行了一些测试，发现Nuxt.js的灯塔得分比Vue的PWA模板更高，我认为这是令人印象深刻的。

Nuxt.js是可与CLI命令一起使用的高层框架，可用于创建通用Vue应用程序。以下是部分好处，但不是全部：

服务器端渲染
自动代码分割
强大的路由系统
很棒的灯塔得分the
静态文件服务
ES6 / ES7移植
开发中的热装
预处理器：SASS，LESS，Stylus等
编写Vue文件以创建页面和布局！
我个人的最爱：轻松向页面添加过渡

让我们建立一个带有一些路由的基本应用程序，以了解自己的收益。

设定

如果您还没有做的第一件事，就是下载Vue的CLI。您可以使用以下命令全局执行此操作：

npm install -g vue-cli

# ... or ...
 
yarn add global vue-cli

您只需要执行一次，而不必每次使用。

接下来，我们将使用CLI搭建新项目，但是我们将使用Nuxt.js作为模板：

vue init nuxt/starter my-project
cd my-project
yarn  # or...  npm install
npm run dev

您将看到正在构建的应用程序的进度，它将为您提供专用的开发服务器以进行检出：http://127.0.0.1:3000/。这是您马上就会看到的（带有一个非常酷的小动画）：

现在让我们看一下是什么在创建我们的应用程序的初始视图。我们可以转到`pages`目录，在里面可以看到有一个`index.vue`页面。如果打开它，我们将看到创建该页面所需的所有标记。我们还将看到它是一个`.vue`文件，与任何普通的`vue`文件一样，使用单个文件组件，带有HTML的模板标签，脚本的脚本标签，我们在其中导入组件，以及样式标签中的某些样式。（如果您不熟悉这些内容，那么这里有更多信息。）整个过程中最酷的部分是，该.vue文件不需要任何特殊的设置。它被放置在`pages`目录中，并且Nuxt.js会自动创建这个服务器端渲染页面！

让我们创建一个新页面并在它们之间建立一些路由。在`pages / index.vue`中，转储已经存在的内容，并将其替换为：

<template>
  <div class="container">
    <h1>Welcome!</h1>
    <p><nuxt-link to="/product">Product page</nuxt-link></p>
  </div>
</template>

<style>
.container {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  padding: 60px;
}
</style>

然后让我们在pages目录中创建另一个页面，我们将其称为`product.vue`并将其内容放入其中：

<template>
  <div class="container">
    <h1>This is the product page</h1>
    <p><nuxt-link to="/">Home page</nuxt-link></p>
  </div>
</template>

立即，您将看到：

- 🏆
立即，我们有了服务器端渲染，在页面之间进行路由（如果您查看URL，您会看到它在索引页面和产品页面之间），甚至还有一个甜美的绿色加载器，它在顶部滑动。我们没有在所有做很多工作来得到那个去。

您可能已经注意到了，这里有一个特殊的小元素： <nuxt-link to="/"> 。这个标签可以将其用作a标签，它环绕多的内容，它会建立我们的网页之间的内部路由链接。我们将使用to="/page-title-here"而不是href 。

现在，让我们添加一些过渡。我们将分几个阶段进行操作：简单到复杂。

创建页面过渡

当我们进行路由时，我们已经有了一个非常酷的进度条，该进度条横穿屏幕顶部，使整个过程显得非常活泼。（这是一个技术术语）。尽管我非常喜欢它，但它并不完全符合我们前进的方向，所以让我们暂时摆脱它。

我们将进入我们的`nuxt.config.js`文件并更改以下行：

/*
** Customize the progress-bar color
*/
loading: { color: '#3B8070' },

至

loading: false,

您还将在此nuxt.config.js文件中注意到其他一些内容。您会看到我们的meta和head标签，以及将在其中显示的内容。那是因为我们没有传统的CLI构建中的传统`index.html`文件，Nuxt.js将解析并构建我们的`index.vue`文件以及这些标记，然后呈现其内容。我们，在服务器上。如果您需要添加CSS文件，字体等，我们将使用此Nuxt.js配置文件来完成。

现在，我们已经了解了所有这些内容，下面让我们了解可用于创建页面过渡的内容。为了了解所插入页面上发生的情况，我们需要查看Vue中的过渡组件如何工作。我已经在此处撰写了有关此内容的文章，因此，如果您想进一步了解该主题，可以进行确认。但是，您真正需要知道的是：在后台，Nuxt.js将插入Vue transition组件的功能，并为我们提供一些默认值和挂钩以供使用：

您可以在此处看到我们对要在动画开始enter 之前，动画/过渡enter-active 期间以及结束时要发生的事情的了解。我们有东西的时候离开，除了前面这些相同挂钩leave来代替。我们可以进行简单的过渡，仅在状态之间进行插值，也可以将完整CSS或JavaScript动画插入其中。

通常在Vue应用程序中，我们会将组件或元素包装在<transition>中，以便使用这种小巧的功能，但是Nuxt.js会一开始就为我们提供此功能。该页面的钩子将以谢谢page开始。要在页面之间创建动画，我们要做的就是添加一些插入钩子CSS：

.page-enter-active, .page-leave-active {
  transition: all .25s ease-out;
}
.page-enter, .page-leave-active {
  opacity: 0;
  transform-origin: 50% 50%;
}

我还将在此处添加一些样式，以便您可以更轻松地看到页面转换：

html, body {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
  background: #222;
  color: white;
  width: 100vw;
  height: 100vh;
}

a, a:visited {
  color: #3edada;
  text-decoration: none;
}

.container {
  padding: 60px;
  width: 100vw;
  height: 100vh;
  background: #444;
}

现在，我们正在使用CSS Transition。这仅使我们能够指定在两个状态的中间做什么。我们可以通过使动画进行调整以暗示某些东西来自何处以及将要到达何处来做一些更有趣的事情。为此，我们可以为pageenter和pageleave-active类分离出过渡，但是使用CSS动画并指定事物的来回位置要多一点，然后为for插入每个事物.page-enter-active .page-leave-active .page-enter-active和.page-leave-active ：

.page-enter-active {
  animation: acrossIn .45s ease-out both;
} 

.page-leave-active {
  animation: acrossOut .65s ease-in both;
} 

@keyframes acrossIn {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes acrossOut {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}

我们还向产品页面添加一些特殊样式，以便我们可以看到这两个页面之间的区别：

<style scoped>
  .container {
    background: #222;
  }
</style>

该作用域标记非常酷，因为它将仅将样式应用于此页面/ vue文件。如果您听说过CSS模块，那么您将熟悉此概念。

我们将看到以下内容（此页面仅用于演示目的，对于典型的页面过渡而言，可能移动太多）：

现在，假设我们有一个完全不同的交互页面。对于此页面，上下移动太大，我们只需要简单的淡入淡出。对于这种情况，我们需要重命名过渡挂钩以将其分离出来。

让我们创建另一个页面，我们将其称为联系人页面并在pages目录中创建它。

<template>
  <div class="container">
    <h1>This is the contact page</h1>
    <p><nuxt-link to="/">Home page</nuxt-link></p>
  </div>
</template>

<script>
export default {
  transition: 'fadeOpacity'
}
</script>

<style>
.fadeOpacity-enter-active, .fadeOpacity-leave-active {
  transition: opacity .35s ease-out;
}

.fadeOpacity-enter, .fadeOpacity-leave-active {
  opacity: 0;
}
</style>

现在我们可以进行两页的转换：

您可以看到我们如何在这些基础上进一步发展，并在每页上创建越来越多的简化CSS动画。但是从这里开始，让我们深入研究我最喜欢JavaScript动画，并以更强大的功能创建页面过渡。

JavaScript挂钩

Vue的<transition>组件也提供了一些钩子来使用JavaScript动画来代替CSS。它们如下，并且每个钩子都是可选的。 :css="false"绑定让Vue知道我们将对此动画使用JS：

<transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-Leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false">
 
 </transition>

我们可以使用的另一件事是过渡模式。我非常喜欢这些动画，因为您可以声明一个动画会等到另一个动画完成转换之后再转换。我们将使用的转换模式将称为“外入”。

我们可以使用JavaScript和过渡模式来做一些真正疯狂的事情，再次，为了演示的目的，我们在这里有些疯狂，我们通常会做些更微妙的事情：

为了做这样的事情，我运行了yarn add gsap因为我正在为这个动画使用GreenSock。在我的`index.vue`页面中，我可以删除现有CSS动画并将其添加到<script>标签中：

import { TweenMax, Back } from 'gsap'

export default {
  transition: {
    mode: 'out-in',
    css: false,
    beforeEnter (el) {
      TweenMax.set(el, {
        transformPerspective: 600,
        perspective: 300,
        transformStyle: 'preserve-3d'
      })
    },
    enter (el, done) {
      TweenMax.to(el, 1, {
        rotationY: 360,
        transformOrigin: '50% 50%',
        ease: Back.easeOut
      })
      done()
    },
    leave (el, done) {
      TweenMax.to(el, 1, {
        rotationY: 0,
        transformOrigin: '50% 50%',
        ease: Back.easeIn
      })
      done()
    }
  }
}

如果您正在学习Vue，那么这些演示的所有代码都在我的Vue简介回购中提供了入门材料。

我想在这里指出的一件事是，目前在Nuxt.js中存在过渡模式的错误。该错误已修复，但尚未发布。在即将发布的1.0版本中，它应该已经全部修复并且是最新的，但是与此同时，这是一个有效的简单示例演示，并且需要解决的问题。

使用此工作代码和这些JavaScript挂钩，我们可以开始变得更奇特，并创建独特的效果，并且每个页面上的过渡都不同：

如果您想实时观看演示，这里是演示已部署到的站点： https : //nuxt-type.now.sh/以及包含该示例代码的存储库： https : //github.com / sdras / nuxt类型

在上一个演示中，您可能已经注意到我们在路由的所有页面上进行了通用导航。为了创建它，我们可以进入“ layouts”目录，我们将看到一个名为“ default.vue”的文件。这个目录将容纳我们所有页面的基本布局，“默认”是默认的:)

立即您会看到以下内容：

<template>
  <div>
    <nuxt/>
  </div>
</template>

这个特殊的<nuxt/>标签将是我们的`.vue`页面文件的插入位置，因此为了创建导航，我们可以插入一个导航组件，如下所示：

<template>
  <div>
    <img class="moon" src="~assets/FullMoon2010.png" />
    <Navigation />
    <nuxt/>
  </div>
</template>

<script>
import Navigation from '~components/Navigation.vue'

export default {
  components: {
    Navigation
  }
}
</script>

我喜欢这一点，因为一切都保持了良好状态，并在我们的全球和本地需求之间进行了组织。

然后，我在一个名为“ components”的目录中有一个名为Navigation的组件（这是Vue应用程序的标准价格）。在此文件中，您将看到许多指向不同页面的链接：

<nav>
  <div class="title">
    <nuxt-link to="/rufina">Rufina</nuxt-link>
    <nuxt-link to="/prata">Prata</nuxt-link>
    <nuxt-link exact to="/">Playfair</nuxt-link>
  </div>
</nav>

您会注意到，即使它在另一个目录中，我也再次使用了该<nuxt-link>标记，并且路由仍然有效。但是最后一页还有一个额外的属性，即exact属性： <nuxt-link exact to="/">Playfair</nuxt-link>这是因为有许多路由仅与`/`目录匹配，所有路由都匹配其实。所以，如果我们指定exact ，Nuxt就会知道，我们只意味着在特定的索引页。