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

前言

今天带大家看看尤雨溪在推特墙裂推荐的 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 搭配,提供高效的全栈方案,从快速启动到路由渲染,再到插件扩展,可以全方位的优化工作流!

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

往期精彩推荐

相关推荐
ttod_qzstudio1 小时前
事件冒泡踩坑记:一个TDesign Checkbox引发的思考
前端·javascript·vue.js·tdesign
IT_陈寒2 小时前
Vue3性能优化实战:这7个技巧让我的应用加载速度提升40%
前端·人工智能·后端
Reuuse2 小时前
登录突然失效:Axios 拦截器判空、localStorage 脏数据与环境变量踩坑
开发语言·前端
早川不爱吃香菜2 小时前
MCP 教程:将 Figma 设计稿转化为前端代码
前端·figma
修炼前端秘籍的小帅2 小时前
PinMe——极简、免费和无需服务器的开源前端部署工具
前端
XXYBMOOO2 小时前
基于 HTML5 Canvas 的终端日志流可视化实现(支持多 Pane / 运维模式)
运维·前端·html5
悟能不能悟2 小时前
vue导出excel文件
前端·vue.js·excel
VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue电影院购票管理系统(源码+数据库+文档)
数据库·vue.js·spring boot·后端·课程设计
闭上眼让寒冷退却2 小时前
知识库发布按钮引发的查询版本发布状态(轮询?——>调用后端接口)以及api接口设计学习
java·前端·javascript
q_19132846952 小时前
基于SpringBoot2+Vue2的企业合作与活动管理平台
java·vue.js·经验分享·spring boot·笔记·mysql·计算机毕业设计