安装 · NuxtHub - Nuxt 中文

快速入门

使用 NuxtHub 入门的最快捷方式是从我们的模板开始。它包含了所有必要的配置和资源来帮助您入门。

点击 GitHub 按钮，然后在 GitHub 上，点击 使用此模板 来创建一个基于该模板的新仓库。

探索 NuxtHub 模板。

运行此命令以使用我们的 hello-edge 模板在本地创建一个新项目

终端

npx nuxthub init my-app

然后，在您的项目目录内（上面的示例中为 my-app），运行您的开发服务器

终端

npm run dev

您的项目将在 https://127.0.0.1:3000 上可用

终端

npx nuxi module add hub

此命令将安装 @nuxthub/core 作为依赖项并将其添加到您的 nuxt.config 的 modules 部分。

pnpm add -D wrangler

就是这样！现在您可以在您的 Nuxt 项目中使用 NuxtHub 功能。

NuxtHub 将在您的项目根目录中创建一个 .data/hub 目录，其中包含使这些功能正常运行所需的配置文件和资源。它还将其添加到 .gitignore 文件中，以避免将其提交到您的仓库。

在您的 nuxt.config.ts 中配置选项，如下所示

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxthub/core'],
  hub: {
    // NuxtHub options
  }
})

analytics

布尔值

默认值为 false - 为您的项目启用分析（即将推出）。

blob

布尔值

默认值为 false - 启用 Blob 存储来存储静态资产，如图像、视频等。

cache

布尔值

默认值为 false - 启用缓存存储来缓存您的服务器路由响应或使用 Nitro 的 cachedEventHandler 和 cachedFunction 的函数

database

布尔值

默认值为 false - 启用 SQL 数据库来存储您的应用程序数据。

布尔值

默认值为 false - 启用键值存储全局可访问的 JSON 数据。

remote

布尔值|字符串

默认值为 false - 允许从您的已部署项目中使用远程存储（数据库、键值、Blob）。
阅读有关远程存储的更多信息以了解其用法.

dir

字符串

默认值为 '.data/hub' - 在开发模式下用于存储（D1、KV、R2 等）的目录。

一切就绪！现在，让我们深入了解如何连接到您的 Cloudflare 帐户并在边缘进行部署。

您还可以通过安装 nightly 标签来使用最新的功能和错误修复（在 main 分支上提交）

package.json

{
  "Dependencies": {
-   "@nuxthub/core": "^0.5.0"
+   "@nuxthub/core": "npm:@nuxthub/core@nightly"
  }
}

然后运行 npm install、pnpm install、yarn install 或 bun install 来更新依赖项。