关于 Nuxt.js

2016 年 10 月 25 日，zeit.co 背后的团队对外发布了 Next.js，一个 React 的服务端渲染应用框架。几小时后，与 Next.js 异曲同工，一个基于 Vue.js 的服务端渲染应用框架应运而生，我们称之为：Nuxt.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 框架是如何运作的？

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

Vue 2
Vue-Router
Vuex (当配置了 Vuex 状态树配置项时才会引入)
Vue 服务器端渲染 (排除使用 mode: 'spa')
Vue-Meta

压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。

另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、代码分层、压缩等等）。

特性

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

流程图

下图阐述了 Nuxt.js 应用一个完整的服务器请求到渲染（或用户通过 <nuxt-link> 切换路由渲染页面）的流程：

服务端渲染(通过SSR)

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

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

单页应用程序 (SPA)

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

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

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

静态化 (预渲染)

支持 Vue.js 应用的静态化算是 Nuxt.js 的一个创新点，通过 nuxt generate 命令实现。

该命令依据应用的路由配置将每一个路由静态化成为对应的 HTML 文件。

使用Nuxt.js生成静态站点

了解如何生成静态站点(预渲染)用来提高性能和搜索引擎优化(SEO)，同时减少站点托管成本。

由VueSchool制作视频课程，用于支持Nuxt.js开发

例如，以下文件结构：

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

静态化后变成：

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

静态化可以让你在任何一个静态站点服务商托管你的Web应用。

Nuxt.js 的官网就是一个绝佳的例子, 它静态化后托管在 Netlify 上，也可以参考我们的源代码。

我们不希望每次更新部署 @nuxt/docs 仓库的时候都要手工执行 nuxt generate 命令生成静态文件，它会触发 Netlify 的钩子应用：

克隆 nuxtjs.org repository
使用 npm install 命令安装依赖
运行 npm run generate
生成 dist 目录

我们现在就有了一个 无服务端的自动静态化的Web应用 :)

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

查看如何在Netlify上部署？来获取更多相关信息。

NUXT 入门第一课：关于 Nuxt.js相关推荐

人工智能入门第一课：手写字体识别及可视化项目（手写画板）（mnist）
人工智能入门第一课:手写字体识别及可视化项目(手写画板)(mnist),使用技术(Django+js+tensorflow+html+bootstrap+inspinia框架) 直接上图,项目效果 1 ...
Opencv入门第一课打开窗口
Opencv入门第一课打开窗口一.如何打开图片(代码解释如下) Mat src = imread("D:/images/lena.jpg"); 解释:imageread图片读取 ...
【C++】入门第一课
文章目录 C++入门第一课 1. C++发展简史 2.C++关键字 3.C++运行环境 4.C++头文件以及输入输出 4.1 头文件 4.2输入输出 5.命名空间(namespace) 5.1命名空间 ...
janusgraph 引入 java_JanusGraph入门第一课和官方文档踩坑
入门第一课是在IDEA里创建一个项目,有些小曲折.这里运行的Demo是读取janusgraph示例的"神之图"(Graph of the Gods)数据并打印,采用Hbase+ES ...
摩托入门第一课[老猫]
摩托入门第一课老猫 2001-02-24 早就想给新入门的摩托朋友写一点东西了,因为自己当初也是那么的一脸茫然.想不出什么好的题目,就用了"第一课"的字眼,希望读者老兄不要介意. ...
大数据入门第一课 Hadoop基础知识与电商网站日志数据分析
大数据入门第一课 Hadoop基础知识与电商网站日志数据分析本课程从Hadoop核心技术入手,以电商项目为依托,带领你从0基础开始上手,逐步掌握大数据核心技术(如:HDFS.YARN.MapRedu ...
C#编程入门第一课 Visual studio 2019使用，cs文件构成，打开项目文件，两句最简单语句，运行前，运行程序，显示行号，设置字体
C#编程入门第一课文章目录 C#编程入门第一课 1 2 3 Visual Studio 2019 4. cs文件构成 5. 打开项目文件 6. 两句最简单语句 7. 运行前 8.运行程序 9.显示行 ...
Linux运维工程师入门第一课-赵永刚-专题视频课程
Linux运维工程师入门第一课-75人已学习课程介绍本课程包含许多工作中会遇到的问题及解决方案,解决大家工作当中遇到的问题.非常适合刚刚入门的同学来学习linux基础入门. 本课程 ...
python编程入门第一课_python入门前的第一课 python怎样入门
人工智能时代的到来,很多文章说这么一句:"不会python,就不要说自己是程序员",这说的有点夸张了,但确实觉得目前python这个语言值得学习,而且会python是高薪程序员的必 ...

NUXT 入门第一课：关于 Nuxt.js

关于 Nuxt.js

Nuxt.js 是什么？

Nuxt.js 框架是如何运作的？

特性

流程图

服务端渲染(通过SSR)

单页应用程序 (SPA)

静态化 (预渲染)

NUXT 入门第一课：关于 Nuxt.js相关推荐

最新文章

热门文章

NUXT 入门第一课： 关于 Nuxt.js

关于 Nuxt.js

Nuxt.js 是什么？

Nuxt.js 框架是如何运作的？

特性

流程图

服务端渲染(通过SSR)

单页应用程序 (SPA)

静态化 (预渲染)

NUXT 入门第一课： 关于 Nuxt.js相关推荐

最新文章

热门文章

NUXT 入门第一课：关于 Nuxt.js

NUXT 入门第一课：关于 Nuxt.js相关推荐