利用Nuxt.js创建服务端渲染的Vue.js应用程序

Nuxt.js 是一个 Vue 同构应用程序开发框架。本文将介绍为什么要选择 Nuxt、如何创建一个 Nuxt 项目、Nuxt 项目结构、Nuxt 的强化组件、使用服务端渲染时的考量、Nuxt 在各种环境的部署以及涉及的一些基本概念。希望能够鼓励你尝试 Nuxt 来进行快速开发，并利用 Nuxt 提供的强大功能创造出交互丰富的卓越用户体验。

像 Vue 之类的 JavaScript 框架（或库）可以在浏览你的网站时提供奇妙的用户体验。大多数框架都提供了一种动态改变页面内容，而无需每次都向服务端发送一个请求。

然而，这种方案有一个问题。刚开始加载你的网站时，浏览器不会接收到完整的显示页面。相反地，浏览器收到一堆用来构建页面的代码片段（HTML、CSS 和其它文件）和如何将这些代码片段组装起来的指令（一个 JavaScript 框架或库）。在浏览器真正有可以显示的东西之前，需要先花费一段时间来将这些信息拼装起来，这有点像收到一堆书和一个扁平包装的书柜。

解决这个问题的方案很巧妙：在服务端放一个能够构建出随时显示的页面的框架（或库）版本，然后将这个完整页面发送给浏览器，附带进一步改变的能力和动态页面内容（框架 / 库），就像发送一个现有的书柜和一些书，当然，你仍然需要将这些书放到书柜中，但是你已经得到了一些立即可用的东西。

除了这个可能不太巧妙的比喻，Nuxt 还有许多其它优势。举个例子，一个很少改变的页面，比如一个 关于我们 页面，并不需要每次在用户访问它的时候重新创建。因此，服务器可以只创建它一次，然后将它缓存或存储在某个地方以备将来使用。这种速度提升可能看起来很小，但是在一个响应时间以毫秒（或更少）来衡量的环境下，每一点小的提升都很重要。

如果你想了解关于 Vue 环境下的服务端渲染（Server-Side Rendering，SSR）优势的更多信息，可以查看 Vue 自己的关于服务端渲染的文章。虽然有许多实现服务端渲染的可选方案，但是 Nuxt 是最流行的方案，也是 被 Vue 团队所推荐的方案。

为什么选 Nuxt.js

Next 是一个针对流行的 React 库的服务端渲染实现。在看到了这种设计的优势之后，以它为基础，设计了一个针对 Vue 的类似实现，即 Nuxt。熟悉 React+Next 组合的人，会在设计和应用程序布局方面发现许多相似之处。然而，Nuxt 提供了一些 Vue 特有的功能来针对 Vue 创建一个功能强大而灵活的服务端渲染解决方案。

Nuxt 在 2018 年 1 月份 更新到 1.0 生产环境就绪版本，并且成为活跃的受到广泛支持的社区的一部分。其中最重要的一点是，使用 Nuxt 构建一个项目和构建其它 Vue 项目没有太多不同。事实上，它提供了一堆特性，使你能够以更少的时间创建结构良好的代码库。

另外值得一提的是，Nuxt 不一定非要用于服务端渲染。它被推动作为一个 Vue.js 同构应用程序开发库，包含了一个使用相同代码创建静态生成的 Vue 应用程序的命令（nuxt generate）。因此，如果你对于深入研究服务端渲染顾虑重重，不要惊慌。你仍然可以利用 Nuxt 的特性创建一个静态站点。

我们可以创建一个简单的项目来深入理解 Nuxt。这个项目的最终源码 托管在 GitHub 上，你可以随便查看，或者，你可以查看托管在 Netlify 上的使用nuxt generate创建的 实时版本。

创建一个 Nuxt 项目

首先，让我们使用一个名为vue-cli的 Vue 项目生成器快速创建一个示例项目：

# install vue-cli globally
npm install -g vue-cli

# create a project using a nuxt template
vue init nuxt-community/starter-template my-nuxt-project

经过几个选项之后，就会在my-nuxt-project目录或者你指定的其它目录创建一个项目。然后我们只需要安装依赖，运行服务器：

cd my-nuxt-project
npm install # Or yarn
npm run dev

这样做之后，确保项目正在运行，然后打开浏览器，访问localhost:3000。这跟创建一个 Vue Webpack 项目没有太多不同。然而，当我们查看应用程序的实际结构时，并没有太多文件，特别是和类似 Vue Webpack 模版之类的文件比较起来的话。

package.json也显示我们只有一个依赖——Nuxt 它本身。这是因为 Nuxt 的每个版本都是针对特定版本的 Vue、Vue-router 和 Vuex 进行定制并将它们打包在一起的。

在项目的根目录还有一个nuxt.config.js文件。这使得你能够自定义许多 Nuxt 提供的功能。默认情况下，它会为你设置头部标签、加载条颜色以及 ESLint 规则。如果你着急想看看你能够进行哪些配置，这里有一个文档链接；我们将在本文介绍到其中的一些配置项。

那么，这些目录有什么特别的呢？

项目结构

如果你浏览一遍创建出来的目录，它们都会有一个附带的 Readme 文件。这个 Readme 文件通常以一段介绍这个目录是干什么的简短总结和一个文档链接开头。

使用 Nuxt 的一个好处是：一个默认的应用程序结构。任何 优秀的前端开发者 都会类似这样来安排应用程序结构，但是关于应用程序结构存在许多不同的想法，而团队协作时，不可避免地会投入一些时间来讨论或选择应用程序结构。Nuxt 给你提供了一个，（通常就可以避免再花费这些时间）。

Nuxt 会寻找特定的目录，然后基于它找到的目录来为你构建你的应用程序。让我们逐个看看这些目录。

Pages

这是唯一的 必需 目录。这个目录中的任何 Vue 组件都会基于它们的文件名称和目录结构自动添加到vue-router中。这点真是超级方便。通常，我会有一个独立的 Pages 目录，然后必需手动将其中的每个组件注册到另一个路由文件中。对于比较大型的项目，这个路由文件会变得复杂，可能需要进行拆分来维持可读性。相反地，Nuxt 会为你处理所有这些逻辑。

为了演示，我们可以在 Pages 目录创建一个名为about.vue的 Vue 组件。让我们添加一个简单的模板：

<template>
 <h1>About Page</h1>
</template>

当你保存的时候，Nuxt 会为你重新生成对应的路由。可以看到，因为我们将组件命名为about.vue，如果你导航到/about，你应该就会看到那个组件。很简单。

有一个文件名很特别。将一个文件命名为index.vue会为那个目录创建一个根路由。当项目生成的时候，在 Pages 目录已经有一个index.vue组件，它关联到你站点的主页或着陆页（landing page）。（在这个开发示例中，指的是localhost:3000。）

更深的路由会怎么样呢？Pages 目录的子目录可以帮你构建自己的路由结构。因此，如果我们想要一个 View Product 页面，我们可以将 Pages 目录构建成如下的结构：

/pages
--| /products
----| index.vue
----| view.vue

现在，如果我们导航到/products/view，我们会看到 products 目录中的view.vue组件。如果导航到products，我们会看到 products 目录中的index.vue目录。

你可能会问，我们为什么不在 Pages 目录创建一个products.vue组件