尤雨溪强烈推荐的这个库你一定要知道 ⚡️⚡️⚡️

前言

今天带大家看看尤雨溪在推特墙裂推荐的 Nitro v3 这个库!

往期精彩推荐

正文

Nitro 是一个全栈框架,兼容任何运行时。

Nitro v3 可以通过 Vite 插件形式集成,扩展 dev 服务器为生产服务器,支持 vite build 统一输出前后端代码。

快速启动与渐进集成

Nitro 支持 npx create-nitro-app 一键创建项目,或在现有 Vite 项目中安装 nitro 包并添加插件:

javascript 复制代码
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";

export default defineConfig({
  plugins: [nitro()]
});

这样配置后 Vite 的 HMR 无缝延伸至后端路由和 API,可以在单一项目中处理前后端逻辑,无需切换工具链。

路由与生命周期优化

Nitro 的文件系统路由(routes/目录)与 Vite 的模块解析结合,自动映射API端点,支持动态参数、方法特定(如.get.ts)和中间件。

bash 复制代码
routes/
  api/
    test.ts      <-- /api/test
  hello.get.ts   <-- /hello (GET only)
  hello.post.ts  <-- /hello (POST only)

文件中只需要通过函数暴露对象即可:

js 复制代码
import { defineHandler } from "nitro/h3";

export default defineHandler(() => {
  return { hello: "API" };
});

生命周期从路由规则到全局中间件,再到自定义服务器入口和渲染器,确保请求高效处理。

渲染器与SSR支持

Nitro 的渲染器(renderer)捕捉未匹配路由,支持自动 index.html 或自定义模板,使用 Rendu 预处理器注入动态内容。自定义渲染器通过defineRenderHandler生成响应!

插件与扩展性

Nitro 插件(plugins/目录)在启动时运行,支持钩子(如closeerrorrequest)扩展行为。

js 复制代码
// nitro.config.ts
export default defineNitroPlugin((nitro) => {
  nitro.hooks.hook("close", async () => {
    // Will run when nitro is being closed
  });
})

支持 hook 时机如下:

javascript 复制代码
"close", () => {}
"error", (error, { event? }) => {}
"render:response", (response, { event }) => {}
"request", (event) => {}
"beforeResponse", (event, { body }) => {}
"afterResponse", (event, { body }) => {}

最后

Nitro v3 与 Vite 搭配,提供高效的全栈方案,从快速启动到路由渲染,再到插件扩展,可以全方位的优化工作流!

今天的分享就这些了,感谢大家的阅读,如果文章中存在错误的地方欢迎指正!

往期精彩推荐

相关推荐
2401_878454533 小时前
Vue 核心特性详解:计算属性、监听属性与事件交互实战指南
前端·vue.js·交互
1024小神4 小时前
uniapp+vue3+vite+ts+xr-frame实现ar+vr渲染踩坑记
前端
测试界清流4 小时前
基于pytest的接口测试
前端·servlet
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,自定义组件与第三方 UI 组件库(以 Vant Weapp 为例) (16)
前端·学习·ui·微信小程序·小程序·vue·编程
trsoliu4 小时前
多仓库 Workspace 协作机制完整方案
前端
啦工作呢5 小时前
数据可视化 ECharts
前端·信息可视化·echarts
NoneSL5 小时前
Uniapp UTS插件开发实战:引入第三方SDK
前端·uni-app
trsoliu5 小时前
Claude Code Templates
前端·人工智能
wangpq5 小时前
使用rerender-spa-plugin在构建时预渲染静态HTML文件优化SEO
前端·javascript·vue.js