关于 Nuxt.js

2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js ，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.js。

Nuxt.js 是什么？

Nuxt.js 是一个 基于 Vue.js 的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染 。

Nuxt.js 预设了利用 Vue.js 开发 服务端渲染 的应用所需要的各种配置（在 Nuxt 之前大多 Vue 项目的 SSR 解决方案是 vue-server-renderer ，需要做很多工作）。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。

通过 SSR 应用和 SPA 应用有什么不同

首先，我们来了解两个概念：客户端渲染（CSR）和服务端渲染（SSR）。

客户端渲染 CSR

从图中可以看到，用户打开一个链接时，浏览器向 Web 服务器（通常是 nginx）请求对应的资源，请求到之后，浏览器会去解析 HTML，下载对应的资源（CSS、JS等），对于 Vue 来说，接收到的 HTML 一般就是个 只有根节点的容器 ，真正的内容需要解析运行 js 脚本才能渲染出来。（需要额外的向接口服务器请求数据，最终的页面才是完整的）

我们可以发现，HTML 最终是在客户端进行“组装”，然后才呈现给用户的。

服务端渲染 SSR

从图中可以看到，用户打开一个链接时，浏览器向 Nuxt 应用的服务器请求对应的资源，从浏览器的角度来看，最终响应的 HTML 文件是“完整”的。而 Nuxt 应用的服务器接手了“拼接”的过程。

SSR 的优点

以上就是 CSR 和 SSR 的区别，那么我们为什么要使用 SSR 呢？

我们或多或少都听过 Vue 写的 SPA 应用 SEO 不太好，为啥不好呢？实际上我们去搜索引擎搜一个问题时，搜索引擎会去“爬取”所有相关的内容，然后对内容进行排序，而爬虫爬取的是 HTML，我们之前说过，SPA 应用服务器响应的一般是只有根节点的容器，里面的内容在完成数据填充后才有，爬虫爬不到东西，自然不会优先显示你的网页，而通过 SSR 响应的 HTML 是 完整的 ，很 利于爬虫的采集。

除此之外，由于 SSR 请求返回的 HTML 是完整的，我们无需发起别的接口请求，因此 首屏渲染 会比 CSR 快上许多。

应用

那么 SSR 什么时候该用呢？

首先应用如果比较注重 流量 的，推荐使用 SSR，比如 博客、论坛、官网 等，流量就是命脉。

像管理后台等 B 端网站，一般是没有必要使用服务端渲染的。

创建一个 Nuxt 应用

Nuxt.js 的团队专门做了一个脚手架，来方便我们快速启动一个 nuxt 项目。由于 Nuxt.js 在 node 之上，所以我们首先要确保 node 环境已经安装好。

安装好后，我们开始使用提供的命令来创建脚手架。

首先，win + r 输入 cmd 打开终端，然后开始创建我们的 Nuxt 项目，相关命令如下：

npx create-nuxt-app <项目名> 

创建项目的时候，脚手架会询问我们 Server 用的框架、是否使用 lint 以及 css 预处理语言等问题，我们按需选择就好了。

需要注意的是，如果我们需要创建的是一个服务端渲染的应用，那么在 Nuxt 模式的选择中，我们应该选择 Universal 而不是 SPA。

接下来我们进入到项目中。

cd  

试试启动项目：

npm run dev 

默认的端口是 3000，不出意外我们打开 3000 端口可以看到应用已经启动了。

注意：Nuxt.js 会监听 pages 目录中的文件更改，因此在添加新页面时无需重新启动应用程序。

至此，一个简单的 Nuxt 应用就成功启动啦。

最后

整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴，可以点击下方卡片领取，无偿分享