快速开始

从一个全新的 Nitro 项目开始,或在现有的 Vite 项目中采用它。

在线试用 Nitro

在我们的游乐场中通过浏览器体验 Nitro。

在 StackBlitz 中试用 Nitro

创建 Nitro 项目

创建 Nitro 应用最快的方式是使用 create-nitro-app

请确保已安装最新 LTS 版本的 Node.jsBunDeno
npx create-nitro-app
预览

按照 CLI 的说明操作,然后你就可以启动开发服务器了。

添加到 Vite 项目

你可以将 Nitro 添加到任何现有的 Vite 项目中,以获得 API 路由、服务端渲染等功能。

安装 nitrovite

npm i nitro vite

向 Vite 添加 Nitro 插件

将 Nitro 插件添加到你的 vite.config.ts 中:

vite.config.ts
import { defineConfig } from "vite";
import { nitro } from "nitro/vite";

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

配置 Nitro

创建 nitro.config.ts 来配置服务器目录:

nitro.config.ts
import { defineNitroConfig } from "nitro/config";

export default defineNitroConfig({
  serverDir: "./server",
});

serverDir 选项告诉 Nitro 在哪里查找你的服务器路由。在这个例子中,所有路由都将位于 server/ 目录内。

创建 API 路由

server/api/test.ts 创建你的第一个 API 路由:

server/api/test.ts
import { defineHandler } from "nitro";

export default defineHandler(() => {
  return { message: "Hello Nitro!" };
});

文件路径直接映射到路由 URL — server/api/test.ts 变为 /api/test

作为文件系统路由的替代方案,你可以使用 routes 配置选项以编程方式声明路由。查看 程序化路由处理器 了解更多详情。
你可以从处理器中返回字符串、JSON 对象、Response 实例或可读流。查看 路由 了解更多关于动态路由、方法和中间件的信息。

启动开发服务器

npm run dev -- --open

你的 API 路由现在可以通过 http://localhost:3000/api/test 访问了 ✨