Nuxt.js介绍
狐七 1/28/2022 SSR
Nuxt.js 是一个基于Vue.js的服务端渲染应用框架，它可以帮我们轻松的实现同构应用。通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI渲染。
作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据 加载、中间件支持、布局支持等非常实用的功能。
# 一、使用方式
# 1. 初始项目
初始化一个全新项目
# 2. 已有的Node.js服务端项目
可以在当前Node.js服务端项目的基础上，直接把Nuxt当做一个中间件集成到Node Web Server中
# 3. 已有的Vue.js项目
可以在当前Vue.js项目的基础上，为了处理SEO和首屏渲染的问题，需要非常熟悉Nuxt.js，至少有10%的代码改动
# 二、如何运作
# 集成组件、框架
集成
- Vue2
- Vue-Router(路由)
- Vuex(状态管理)
- Vue服务端渲染(Vue SSR)
- Vue-Meto(Vue头部信息)
- 压缩之后代码57kb，不大
# 自动化构建
集成
- webpack
- vue-loader
- babel-loader
# 三、特性(大杂烩，你想要的全都有)
- 基于 Vue.js
- Vue、Vue Router、Vuex、Vue SSR
- 自动代码分层
- 服务端渲染
- 强大的路由功能，支持异步数据
- 静态文件服务
- ES2015+ 语法支持
- 打包和压缩 JS 和 CSS
- HTML 头部标签管理
- 本地开发支持热加载
- 集成 ESLint
- 支持各种样式预处理器： SASS、LESS、 Stylus 等等
- 支持 HTTP/2 推送
# 四、NuxtJS渲染模式
NuxtJS支持三种渲染模式：
# 服务端渲染应用(默认)
主要能力，提供同构渲染的应用，解决SEO问题。
NuxtJS 服务端渲染流程 (opens new window)
首次访问的单个页面是服务端渲染出来的，通过链接点过去的就是客户端渲染的。
# Server-side rendering steps with Nuxt.js
- 当浏览器发送初始请求时，它将访问Node.js内部服务器。 Nuxt.js将生成HTML，并将其与已执行函数的结果一起发送回浏览器。
- 接收了页面显示，并把返回的脚本激活成可动态交互的vue
- 使用
<NuxtLink>在页面之间导航是在客户端完成的，因此除非您强制刷新浏览器，否则您不会再次访问服务器。
# 客户端渲染 —— 单页应用程序SPA
可以开发，并不是强项
// nuxt.config.js
export default {
ssr: false // 默认是true，服务端渲染
}
1
2
3
4
2
3
4
# 静态化站点(预渲染)
所谓的静态网站其实就是提前把相关内容生成纯 html 文件， nuxt.js提供了一种命令叫： nuxt generate ，为基于Vue.js的应用提供生成对应的静态站点的功能。
- 第一步在config中进行设置
// nuxt.config.js
export default {
ssr: false,
target: 'static'
}
1
2
3
4
5
2
3
4
5
- 执行命令，构建结果将输出到 dist 目录。
npm run generate
1
NuxtJS 也可以像 Gridsome、Next 等工具一样生成纯静态网站。速度最快。
缺点：
如果你的网站中动态数据较多，则应该使用服务端渲染或者客户端渲染模式。
如果你的网站中：
- 没什么动态数据
- 或者对数据的实时性要求不高(一天两天可以更新)
那么可以使用这个模式。
或者你的网站根本就不需要动态数据，那就直接纯静态网站，速度极快。
# 三种渲染方式比较
| 渲染方式 | 使用场景 | 性能 | 配置 | 打包 |
|---|---|---|---|---|
| 服务端渲染 | 如果有SEO、首屏渲染性能有需求 | 比预渲染慢，首屏比客户端快，其他与客户端一样。 | 默认 | npm run build |
| 客户端渲染 | 不需要SEO，可以忽略首屏渲染的影响 | 首屏慢 | ssr: false | npm run build |
| 预渲染 | 没啥动态数据，或对动态数据的实时性要求不高，可以使用静态网站生成模式 | 性能最高 | target: 'static' | npm run generate |
# 五、生命周期
| 钩子函数 | 说明 | Server | Client |
|---|---|---|---|
| beforeCreate | 在实例创建之前被调用，此时还拿不到数据和 DOM。 | ✔ | ✔ |
| created | 在实例创建完成后被调用，此时可以操作数据了。 | ✔ | ✔ |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 | ❌ | ✔ |
| mounted | 实例被挂载后调用，此时可以执行一些初始 DOM 操作。 | ❌ | ✔ |
| beforeUpdate | 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。 | ❌ | ✔ |
| updated | 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 | ❌ | ✔ |
| activated | 被 keep-alive 缓存的组件激活时调用。 | ❌ | ✔ |
| deactivated | 被 keep-alive 缓存的组件停用时调用。 | ❌ | ✔ |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 | ❌ | ✔ |
| destroyed | 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 | ❌ | ✔ |
| errorCaptured | 当捕获一个来自子孙组件的错误时被调用。 | ✔ | ✔ |