快速开始

创建一个 Void 应用、在本地运行并部署上线。也可以把 Void 接入已有的 Vite 项目。

预计阅读 3 分钟

创建应用

在一个空目录中，安装 Void 并运行初始化：

npm install -D void
npx void init

pnpm add -D void
pnpm void init

yarn add -D void
yarn void init

bun add -D void
bunx void init

选择你的 UI 框架、起始模板与部署目标。Vite+ 是默认的构建工具。D1 是一个很好的首选数据库：它不需要单独运行数据库服务就能在本地工作。选择 Cloudflare 即可部署到你自己的账户，或者暂时跳过部署配置。

使用 pnpm 时，pnpm create void my-app 会同时创建项目目录并配置原生的构建权限。

npm run dev

打开 http://localhost:5173。在 Pages 起始模板中，pages/ 放你的 UI，配套的 .server.ts 文件放它们的服务端 loader 与 action。Loader 把数据作为带类型的 props 返回给页面组件。

编辑 routes/api/hello.ts；如果你的模板里没有这个文件，就新建一个：

import { defineHandler } from 'void';

export const GET = defineHandler(() => {
  return { message: 'Hello from Void' };
});

访问 http://localhost:5173/api/hello 看看响应。在客户端代码中，用 Void 的类型化 fetch 调用它：

import { fetch } from 'void/client';

const { message } = await fetch('/api/hello');

文件路径定义了 URL，处理器定义了响应类型。修改处理器中的 message，TypeScript 会用新的结构检查客户端。

如果你在初始化时选择了目标：

npx void deploy

如果当时跳过了部署配置，选择你的 Cloudflare 账户：

npx void deploy --platform cloudflare

Void 会在需要时打开浏览器让你登录，构建应用、开通资源、执行迁移，然后打印出部署地址。之后的部署会使用已保存的目标。团队平台、CI 与回滚参见部署。

用上面同样的包管理器命令安装 Void 并运行 void init。初始化流程会把 voidPlugin() 加入你的 Vite 配置，并创建其余的项目文件。如果配置需要手动修改，CLI 会把需要做的改动打印出来。

对于 TanStack Start、React Router 或 SvelteKit 这类元框架，请阅读对应的框架集成指南。