Nuxt 概述

本文将介绍 Nuxt,一款基于 Vue 的全栈框架。

一、什么是 Nuxt?

Nuxt 是一个构建于 Vue 生态系统之上的全栈框架,便于开发 SPA、SSR、SSG 应用,并支持后端接口的编写。

二、Nuxt 的特点

  • “开箱即用” 的开发环境:Nuxt 整合了许多依赖,并内置了大量优化和配置,避免了开发者的重复劳动,使其可以专注于 Web 应用的开发

  • “约定大于配置” 的目录结构

  • 支持自动导入:

    • 基于目录结构,自动导入组件、组合式函数、工具函数
    • 自动导入 Vue API
    • 根据配置自动从第三方包中导入
  • 使用 Vue 作为前端框架

  • 支持多种渲染模式:

    • SSR2.0:结合 SSR 与 SPA,从而兼顾二者的优点
    • SPA
    • 混合渲染:针对不同的路由,使用不同的方式进行渲染
    • 边缘渲染:在该模式下,Nuxt 程序将会被部署到各个 CDN 节点中,从而在距离用户更近的位置完成渲染工作,进而最大限度地减少数据传输带来的物理延迟

    具体请看:

    前端架构 渲染模式的演进

  • 内置 Nitro 服务引擎,提供对 SSR 的支持,并允许编写 API 接口

三、首屏渲染效果

工作如下:

  • 编写两个完全相同的 page
  • nuxt.config.tsrouteRules 中,将其中一个页面的 ssr 配置为 false
  • 编写一个测试 page,以 iframe 的形式同时嵌入两个页面

效果如下:

具体代码:

codewld/I-Nuxt-Demo

参考