Nuxt_01_介绍

一、简介

1、关于Nuxt.js

Next.js→React的服务端渲染应用框架；

Nuxt.js→Vue的服务端渲染应用框架；

2、Nuxt.js是什么

• 是一个基于Vue.js的通用应用框架；
• 对客户端/服务端基础架构的抽象组织，关注的是应用的UI渲染；
• 可以基于Nuxt.js初始化新项目的基础结构代码 或者 在已有的Node.js项目中使用Nuxt.js；
• nuxt genertate：为基于Vue.js的应用提供生成对应的静态站点的功能；
• 提供的有用的特性：异步数据加载、中间件支持、布局支持等。

3、Nuxt.js框架是如何运作的

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

• Vue2
• Vue-Router
• Vuex（仅当配置了Vuex转发台数配置项时引入）
• Vue服务器端渲染（排除使用mode:‘spa’,单页富应用）
• Vue-Meta（Vue Meta是一个Vue.js插件，可让您管理应用程序的元数据。它的灵感来自和与之相似react-helmet。但是，您无需将数据设置为传递给专有组件的props，而只需使用metaInfo属性将其作为组件数据的一部分导出）
• 另外，Nuxt.js使用Webpack、Vue-loader、babel-loader来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

4、特性

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

5、流程图

6、服务端渲染（通过SSR）

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

7、单页应用程序（SPA）

nuxt --spa：使用SPA模式。无需使用Node.js来运行应用程序或任何特殊的服务器端处理。

在有自己的Web服务器的前提下，仍可以使用Nuxt.js作为中间件，负责UI渲染部分的功能。在开发通用的Web应用过程中，Nuxt.js是可插拔的，没有太多限制。

8、静态化（预渲染）

nuxt generate： 依据应用的路由配置将每一个路由静态化成为对应的HTML文件

例如，以下文件结构：

-|pages/
----|about.vue
----|index.vue

静态化后变成：

-|dist/
----|about/
------|index.html
----|index.html

态化后变成：

-|dist/
----|about/
------|index.html
----|index.html

静态化使得Web应用能够托关于任意的静态站点服务商

参考：https://www.nuxtjs.cn/guide