您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Nuxt.js 介绍

2016 年 10 月 25 日, 背后的团队对外发布了 , React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,基于  的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。

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

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

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

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

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

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

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

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

 (当配置了  时才会引入)

 (排除使用 )

压缩并 gzip 后,总大小为:57kb (如果使用了 Vuex 特性的话为 60kb)。

另外,Nuxt.js 使用  和  、  来处理的化构建工作(如打包、分层、压缩等等)。

Nuxt.js 特性

基于 Vue.js

分层

服务端渲染

强大的路由,异步数据

服务

ES2015+ 语法

打包和压缩 JS 和 CSS

HTML 头部管理

本地开发热加载

集成 ESLint

各种样式预处理器: SASS、LESS、 Stylus 等等

HTTP/2 推送

下图阐述了 Nuxt.js 应用完整的服务器请求到渲染(或通过 <nuxt-link> 切换路由渲染)的流程:

您可以使用Nuxt.js作为框架来处理项目的所有UI呈现。

启动时nuxt,它将启动具有热更新加载的开发服务器,并且配置为为服务器呈现应用程序。

如果您不想使用服务器端渲染或需要应用程序提供静态托管,则可以使用 nuxt --spa 命令即可使用 SPA 模式。 它为您提供了强大的SPA部署机制,无需使用 Node.js 来运行应用程序或任何特殊的服务器端处理。

可以查看 Nuxt.js 提供的各种  来了解更多相关使用信息。

如果你的项目有自己的 Web 服务器(例如用 Express.js 启动的Web服务),你仍然可以将 Nuxt.js 当作是中间件来使用,负责UI渲染部分的。在开发通用的 Web 应用过程中,Nuxt.js 是可插拔的,没有太多的限制,可通过  了解更多的信息。

Vue.js 应用的算是 Nuxt.js 的创新点,通过 nuxt generate 命令实现。

该命令依据应用的路由配置将每路由成为对应的 HTML 。

例如,以下结构:

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

后变成:

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

可以让你在任何静态服务商托管你的Web应用。

Nuxt.js 的官网就是绝佳的例子, 它后托管在  上,也可以参考我们的  。

我们不希望每次更新部署  的时候都要手工执行 nuxt generate 命令,它会触发 Netlify 的钩子应用:

克隆 

使用 npm install 命令安装依赖

运行 npm run generate

 dist 目录

我们现在就有了 无服务端的的Web应用 :)

我们进一步考虑下电商应用的场景,利用 nuxt generate,是不是可以将应用后部署在 CDN 服务器,每当商品的库存发生变化时,就重新下,更新下商品的库存。但是如果访问的时候恰巧更新了呢?我们可以通过电商的 API ,保证访问的是最新的数据。这样相对于传统的电商应用来说,这种的方案可以大大节省服务器的资源。


联系我
置顶