前端路线图

夜间模式

导航

Nuxt.js ​

和 Next.js 类似，Nuxt.js 也是一个服务端自写的，客户端基于Vue，它专用于 Vue SSR/SSG。

它的亮点是，脚手架内置开发者工具，在开发页面上提供了一个GUI界面，方便开发者使用。这个工具给人一种耳目一新的感觉。

Demo ​

通过 nuxi 创建的代码Demo 仓库

shell
npx nuxi@latest init <project-name>

吐槽一下：下面这段测试代码，客户端加载的构建产物JS总大小111KB，过于庞大

vue
<template>
  <div>
    <div>{{ count }}</div>
    <button @click="count++">add</button>
  </div>
</template>
<script setup>
const count = ref(0)
</script>

注意 ​

由于网络环境问题，Nuxt.js 的安装过程对国内用户不友好。

  • 模板下载报错 估计是代码逻辑问题，它强依赖于对 github.com 的静态资源访问，不走系统代理。这导致国内用户下载代码模板会遇到问题
    shell
    # 避免mention
https://github.com/nuxt/nuxt/issues/15101
  • npm install 报错 它的一个依赖包 fast-folder-size 会从特定网址安装二进制文件，而网址被墙了，导致 npm install 会报错

client JS ​

在开发模式下，可以看到入口JS，也就是第一个JS文件是
https://github.com/nuxt/nuxt/blob/v3.6.5/packages/nuxt/src/app/entry.ts

代码结构比较清晰，逻辑步骤分为：

  1. 创建APP实例
  2. 应用插件
  3. 挂载实例，依次执行插件的生命周期钩子

由于开发者在模块化方面做得比较出色，开发了不同的JS库来组成Nuxt框架，副作用是产生了在4个SSR框架对比中最臃肿的入口文件，文件内容包含以下库的客户端代码：

  • vue
  • ofetch：封装的fetch库
  • nitropack：功能相当于gulp的开发工具
  • ufo：封装的url库
  • hookable：插件系统
  • unctx：组合式API管理ctx
  • @unhead/vue：组合式API写<head>标签，适配vue
  • h3：自写的http框架

由于每个库都是独立的模块，因此它们会存在重复的工具函数代码，这些代码相互独立没有复用，造就了最大的入口文件。

参考资料 ​

https://nuxt.com/