nuxt01-nuxt介绍
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运行流程
5.服务端渲染(通过SSR)
5.1 何为服务端渲染
简单理解是将组件或页面通过服务器生成html字符串,再发送到浏览器,最后将静态标记"混合"为客户端上完全交互的应用程序
没使用服务渲染,当请求user页面时,返回的body里为空,之后执行js将html结构注入到body里,结合css显示出来,如下图所示;
使用服务端渲染,当请求user页面时,返回的body里已经有了首屏的html结构,之后结合css显示出来
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请求开销大,导致时间差。 下图为服务端渲染的数据请求路线和客户端渲染的数据请求路线图
- 5.3.2 html渲染
服务端渲染是先向后端服务器请求数据,然后生成完整首屏html返回给浏览器;而客户端渲染是等js代码下载、加载、解析完成后再请求数据渲染,等待的过程页面是什么都没有的,就是用户看到的白屏。就是服务端渲染不需要等待js代码下载完成并请求数据,就可以返回一个已有完整数据的首屏页面。
使用Nuxt.js作为框架来处理项目的所有UI呈现。
启动时nuxt,它将启动具有热更新加载的开发服务器,并且Vue 服务器端渲染配置为自动为服务器呈现应用程序。
nuxt01-nuxt介绍相关推荐
- SEO、SSR、Nuxt.js
目录 SEO SSR Nuxt 介绍 Nuxt环境搭建使用 Nuxt的默认模版和默认布局 Nuxt的错误页面和个性meta设置 asyncData方法获取数据 静态资源和打包 插件 自定义axios ...
- nuxtjs+express+vue2+vuex搭建的服务端渲染(SSR)个人网站项目 1
5se7en.com nuxtjs+express+vue2.0+vuex搭建的服务端渲染个人网站项目. github项目地址: https://github.com/se7en-1992... 项目 ...
- Nuxt.js理解 开启SSR渲染(介绍)---00
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(服务器渲染).再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及.很多人想用Vue开发多页应用,并 ...
- Nuxt.js - nuxt-link与router-link的差异
前言 在使用Nuxt.js时可能会遇到一个这样的问题? 当打开请求页面的时候,所有页面都被请求了. 这正是<router-link>组件所有的特性. 首先说一下router-link ro ...
- Nuxt爬坑系列之vuex
坑的背景介绍 要用 bootstrap-vue 这个vue的ui框架来重构公司的官网,因为公司官网之前使用bootstrap搭建的,现在想用nuxt框架来重构,恰好bootstrap出了结合vue的版 ...
- 开始使用Nuxt.js
Nuxt.js简单的说是Vue.js的通用框架,最常用的就是用来作SSR(Server Side Render服务端渲染).再直白点说,就是Vue.js原来是开发SPA(Single Page App ...
- 基于nuxt和iview搭建OM后台管理系统实践(2)-quill富文本组件的封装
目录结构 这是<基于nuxt和iview搭建OM后台管理系统实践>这一个系列文章的目录,大致思路如下: 简要介绍OM后台管理系统,以及开发环境 自行开发的公共组件(富文本.地图.上传)介绍 ...
- hapi mysql项目实战路由初始化_用hapi.js mysql和nuxt.js(vue ssr)开发仿简书的博客项目...
前言: 预览: 开始: npm i 把mysql配置好 npm run server or npm run dev 实现功能: 用户: 登录.注册.用户资料修改,详情页面,类似于简书的文章数量.总字数 ...
- Node项目部署到阿里云服务器(ECS),以Nuxt.js服务端渲染项目为例
1.前言 最近打算业余时间搭个网站,选择的技术栈为node+mongodb+Nuxt.js(基于vue,用于创建服务端渲染 (SSR) 应用),以下不会教科书式讲解,只是提供整体思路.参考资料以及关键 ...
- Linux路由界面设置,nuxt中如何配置页面路由
nuxt中如何配置页面路由 发布时间:2020-11-06 15:16:34 来源:亿速云 阅读:248 作者:Leah 今天就跟大家聊聊有关nuxt中如何配置页面路由,可能很多人都不太了解,为了让大 ...
最新文章
- NetBeans配置Xdebug 远程调试PHP
- ES6 Rest参数
- .Net运行时的相互关系
- SSL,SSH,OpenSSL,OpenSSH,HTTPS的区别
- c++ string替换指定字符串内的所有字段
- 解决Extjs中Combobox显示值和真实值赋值问题
- Java当中 递归打印文件大小(面向不同的对象打印文件大小)
- 推荐一篇文章,.net3.0新特性
- 重磅!ICCV 2019 COCO + Mapillary 联合识别挑战赛开启!
- Keras学习---MLP和CNN模型建立篇
- 计算机投影仪的作用是什么,解开无屏电脑投影仪的神秘面纱,看看可以用它来做什么...
- 学神经网络需要什么基础,深度神经网络怎么用
- SSH远程控制与访问
- 程序员风格的修真小说之炫小说
- 电脑出现错误信息的故障排除
- 【UML】——活动图
- Python——星期的字典1——7
- 弘辽科技:淘宝宝贝访问量低该如何解决?影响访问量低的原因有?
- 360随身WIFI作USB无线网卡使用教程
- Java 微信公众号开发(一) 介入微信