Nuxt初识

  1. 1. 什么是nuxt?
  2. 2. 特性
  3. 3. 流程图

自从出现前后端分离概念后。前端越来越注重页面交互,后端越来越注重数据逻辑。对于前端来说,出现了一大批javascript框架。其中深受开发者欢迎的框架为React Vue Angular。

本篇介绍一下vue相关内容。

说起前端,人们第一想法就是做网站。而对于一个网站除了有一个好的页面展示以及交互效果外。另一个重要的就是检索引擎优化。就是所谓SEO优化。然而对于前端来说。不管是React Vue 或者angrlar 所开发出来的都是单页应用(single-page application,缩写SPA)。对于网站的seo优化来说什么不友好。于是出现的另一种方式:服务端渲染(server side render 缩写SSR)

什么是nuxt?

由于vue自己无法进行服务端渲染。于是出现了利用第三方库集成方式来实现服务端渲染。而在这其中比较优秀的就是Nuxt这个框架。

从官网中介绍来看:

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

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

我们的目标是创建一个灵活的应用框架,你可以基于它初始化新项目的基础结构代码,或者在已有 Node.js 项目中使用 Nuxt.js。

Nuxt.js 预设了利用 Vue.js 开发 服务端渲染 的应用所需要的各种配置。

除此之外,我们还提供了一种命令叫:nuxt generate ,为基于 Vue.js 的应用提供生成对应的静态站点的功能。

我们相信这个命令所提供的功能,是向开发集成各种微服务(Microservices)的 Web 应用迈开的新一步。

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

特性

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

流程图

由于nuxt是一个基于vue的通用框架。开箱即用。于是他继承了vue几乎所有的特性。而然为了达到开箱即用让开发者更加专注于业务开发的目的。它替换了vue部分特性内容。用nuxt特有的方式进行取代。