跳转到主要内容

Nuxt3 - 直观的 Web 框架

在 @InjectiveLabs 构建 Injective 去中心化应用的首选 UI 框架是 Nuxt3。我们将帮助你配置 Nuxt3 + Vite 构建器与 @injectivelabs 包以及一些 polyfill,因为你需要它们来与加密钱包交互。

1. 安装 Nuxt 3

按照 Nuxt3 文档中的入门指南设置你的应用。

2. 安装 @injectivelabs 包

你可以使用 yarn 安装 @injectivelabs 包。
这些是 injective-ts monorepo 中最常用的包。

3. 配置 Nuxt 并添加 polyfill

首先,添加所需的 polyfill 包
确保你使用的是 vue-tsc@1.8.8nuxt@^3.8.1typescript@^5.0.4 版本。 Buffer 任何加密相关去中心化应用的主要依赖之一是 Buffer。为了确保我们将 Buffer 添加到项目中,我们可以将其作为依赖项安装,然后创建一个 Nuxt 插件将其导入到 global/window 对象:

4. 使用状态管理

如果你要使用 pinia 作为状态管理,将其添加到你的包中:

5. 使用 vueuse

我们建议添加 @vueuse/nuxt 作为依赖项,因为它提供了许多开箱即用的实用函数。 然后,如果你使用 TypeScript(推荐),我们需要配置 tsconfig.json。你可以参考以下 tsconfig.json 作为基础。

6. nuxt.config.ts / packages.json

在启动应用之前,我们需要在 nuxt.config.ts 中设置所有内容,这是每个 Nuxt 3 应用的主要配置点。让我们看一个参考 nuxt.config.ts 并使用注释解释每一行,以便开发者更容易理解。
有一个优化可以减少包大小 - 在 packages.json 中添加这些 resolutions

7. 启动我们的应用

最后,你可以使用 yarn dev 在本地启动应用,或使用 yarn generate 生成静态页面,然后可以部署到任何静态页面托管服务,如 Netlify、Vercel 等。
最后修改于 2026年3月30日