Nust.js介绍
Nust.js介绍
移动互联网的兴起促进了web 前后端分离开发模式的发展,服务端只专注业务,前端只专注用户体验,前端大量运用的前端渲染技术,比如流行的 vue.js、react框架 都实现了功能强大的 前端渲染 。但是,对于有SEO需求的网页如果使用前端渲染技术去开发就 不利于SEO 了,有没有一种即使用 vue.js 、 react 的前端技术也实现服务端渲染的技术呢?其实,对于 服务端渲染 的需求, vue.js、react这样流行的前端框架提供了服务端渲染 的 解决方案 。
Nust.js是什么
Nuxt.js是一个基于Vue.js的通用应用框架。
通过客户端、服务端基础架构的抽象组织,Nuxt.js主要关注的是应用的UI渲染。
灵活的应用框架,基于他初始化新项目的基础结构框架代码,或者在已有Node.js项目中实用Nuxt.js.
Nuxt.js预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。
Nuxt.js为客户端/服务端典型的应用框架模式提供了许多有用的特性,例如异步数据加载、中间件支持、布局支持等
react框架提供next.js实现服务端渲染。vue.js框架提供Nuxt.js实现服务端渲染。
Nuxt.js工作原理
客户端服务端渲染介绍https://blog.csdn.net/qq_51497041/article/details/128483362
从客户端请求到
Nuxt.js
进行服务端渲染的整体的工作流程:
- 用户打开浏览器,输入网址请求到Node.js
- 部署在Node.js的应用Nuxt.js接收浏览器请求,并请求服务端获取数据
- Nuxt.js获取到数据后进行服务端渲染
- Nuxt.js将html网页响应给浏览器
Nuxt.js包含的技术:
- Babel 是一个js的转码器,负责将ES6的代码转成浏览器识别的ES5代码。
- Webpack是一个前端工程打包工具。
- Vue.js是一个优秀的前端框架。
Nuxt.js的特性
- 基于 Vue.js
- 自动代码分层
- 服务端渲染
- 强大的路由功能,支持异步数据
- 静态文件服务
- ES6/ES7 语法支持
- 打包和压缩 JS 和 CSS
- HTML头部标签管理
- 本地开发支持热加载
- 集成ESLint
- 支持各种样式预处理器:
- SASS、LESS、 Stylus等等
Nuxt.js基本使用
创建Nuxt工程