nuxt01-nuxt介绍

骑猪看日落 2023-10-11 15:51 19阅读 0赞

## 1.Nuxt.js 是什么？ ##

> Nuxt.js 是一个基于 Vue.js 的通用应用框架。  
> 通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的UI渲染。  
> 其目标是创建一个灵活的应用框架，你可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js。

## 2. Nuxt.js 框架是如何运作的？ ##

Nuxt.js 集成了以下组件/框架，用于开发完整而强大的 Web 应用：

*  Vue 2
 *  Vue-Router
 *  Vuex (当配置了 Vuex 状态树配置项 时才会引入)
 *  Vue 服务器端渲染 (排除使用 mode: ‘spa’)
 *  Vue-Meta

## 3.特性 ##

*  基于 Vue.js
 *  自动代码分层
 *  服务端渲染
 *  强大的路由功能，支持异步数据
 *  静态文件服务
 *  ES2015+ 语法支持
 *  打包和压缩 JS 和 CSS
 *  HTML 头部标签管理
 *  本地开发支持热加载
 *  集成 ESLint
 *  支持各种样式预处理器： SASS、LESS、 Stylus 等等
 *  支持 HTTP/2 推送

## 4.nuxt运行流程 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center]

## 5.服务端渲染(通过SSR) ##

### 5.1 何为服务端渲染 ###

简单理解是将组件或页面通过服务器生成html字符串，再发送到浏览器，最后将静态标记"混合"为客户端上完全交互的应用程序  
没使用服务渲染，当请求user页面时，返回的body里为空，之后执行js将html结构注入到body里，结合css显示出来,如下图所示；  
![在这里插入图片描述][20210620220518426.png_pic_center]

使用服务端渲染，当请求user页面时，返回的body里已经有了首屏的html结构，之后结合css显示出来  
![在这里插入图片描述][20210620220533860.png_pic_center]

### 5.2 使用SSR的利弊 ###

#### 5.2.1 SSR的优势 ####

*  1.更利于SEO  
    不同爬虫工作原理类似，只会爬取源码，不会执行网站的任何脚本，浏览器爬虫不会等待我们的数据完成之后再去抓取我们的页面数据。服务端渲染返回给客户端的是已经获取了异步数据并执行JavaScript脚本的最终HTML，网络爬中就可以抓取到完整页面的信息。
 *  2.更利于首屏渲染  
    首屏的渲染是node发送过来的html字符串，并不依赖于js文件了，这就会使用户更快的看到页面的内容。尤其是针对大型单页应用，打包后文件体积比较大，普通客户端渲染加载所有所需文件时间较长，首页就会有一个很长的白屏等待时间。

#### 5.2.2 SSR的局限 ####

*  1.服务端压力较大  
    本来是通过客户端完成渲染，现在统一到服务端node服务去做。尤其是高并发访问的情况，会大量占用服务端CPU资源；
 *  2.开发条件受限  
    在服务端渲染中，只会执行到componentDidMount之前的生命周期钩子，因此项目引用的第三方的库也不可用其它生命周期钩子，这对引用库的选择产生了很大的限制；

### 5.3 时间耗时比较 ###

*  5.3.1 数据请求  
    由服务端请求首屏数据，而不是客户端请求首屏数据，这是“快”的一个主要原因。服务端在内网进行请求，数据响应速度快。客户端在不同网络环境进行数据请求，且外网http请求开销大，导致时间差。 下图为服务端渲染的数据请求路线和客户端渲染的数据请求路线图  
    ![在这里插入图片描述][20210620220251495.png_pic_center]

![在这里插入图片描述][2021062022030790.png_pic_center]

*  5.3.2 html渲染  
    服务端渲染是先向后端服务器请求数据，然后生成完整首屏html返回给浏览器；而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染，等待的过程页面是什么都没有的，就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据，就可以返回一个已有完整数据的首屏页面。

使用Nuxt.js作为框架来处理项目的所有UI呈现。  
启动时nuxt，它将启动具有热更新加载的开发服务器，并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20210620220457944.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXlpa2VqaQ==,size_16,color_FFFFFF,t_70#pic_center
[20210620220518426.png_pic_center]: https://img-blog.csdnimg.cn/20210620220518426.png#pic_center
[20210620220533860.png_pic_center]: https://img-blog.csdnimg.cn/20210620220533860.png#pic_center
[20210620220251495.png_pic_center]: https://img-blog.csdnimg.cn/20210620220251495.png#pic_center
[2021062022030790.png_pic_center]: https://img-blog.csdnimg.cn/2021062022030790.png#pic_center