关于 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 <project-name>

试试启动项目：

npm run dev

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

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

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

最后

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

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

使用css形变实现一个立方体相关推荐

html3d上下翻转4面效果,纯CSS 3D翻转一个面（翻转导航菜单立方体）
在做练习的时候学到css的翻转导航菜单,原代码有点让人头疼,通过对其css的参数一点点研究了其实现过程. 这里推荐大家研究这个3D翻转动画的代码. 一首先要知道坐标系的设定如下: 其次翻转关键的参数 ...
html中3d哪个方向是x轴,详解用CSS绘制3D旋转立方体
CSS3D旋转立方体绝对是能充分代表这些年CSS发展新高度的典型案例.从一种只是简单的颜色和尺寸渲染的标记符,CSS现在已经变成了一种能够创造出复杂的.具有艺术感染力的视觉效果的编程语言.动画效果的生 ...
用HTML5+CSS实现3d动画立方体
本文章描述如何用HTML5与CSS做出一个3d动画的立方体. 文章目录一,主要思路与注意事项二,布局与逻辑分析三,效果展示四,完整代码一,主要思路与注意事项: 1.制作一个立方体,需要六个面 ...
纯用CSS来实现3D立方体旋转效果
这次用纯CSS来实现3D立方体旋转效果效果如下(可以想象成一个旋转的立方体) HTML部分首先创建一个ul标签在其ul标签下的6个li标签相当于正方体的6个面 <body>< ...
HTML CSS JavaScript 从一个表格到一个灰阶颜色表（目录）
HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 01 HTML & CSS & JavaScript 从一个表格到一个灰阶颜色表 02 HT ...
NVisionXR_iOS教程三 —— NVisionXR渲染一个立方体
上一章节已经教大家构建了NVision的渲染场景,接下来就可以在场景中渲染物体了,我们接着上一章节的代码. 1.新建一个类,继承NVScenePlay,如下图 2.实例话场景,添加到管理队列中,添 ...
sandy引擎学习笔记：创建一个立方体
问题:如何利用sandy的类库去创建一个立方体呢? 首先,我们要先了解sandy类库的结构可以看到上面就官方网放出的类库表,有一些很容易理解,像sandy.events 这个和flash.event ...
[html] 举例说明只用html和css如何使得一个列表编号倒序？
[html] 举例说明只用html和css如何使得一个列表编号倒序? <!DOCTYPE html> <html> <body> <style> ol{ ...
[css] 手写一个满屏品字布局的方案
[css] 手写一个满屏品字布局的方案 <!DOCTYPE html> <html><head><meta name="viewport" ...

使用css形变实现一个立方体