# @buoy-gg/vue 中文文档

规范地址：https://npmcn.com/package/%40buoy-gg/vue/

版本：7\.0\.87
npm 元数据更新时间：2026-11-07T01:58:51.388Z
中文译文更新时间：2026-11-08T20:33:03.788Z
软件包许可：未声明

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40buoy-gg/vue
原文对照：https://npmcn.com/package/%40buoy-gg/vue/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：39.5 kB，26 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：5 个
- peer 依赖：vue \>=3\.3 \<4
- 首次发布：2026-10-22T06:16:36.963Z
- 最新版本发布：2026-11-07T01:58:51.219Z
- 近 30 天下载量：2358（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

在 Vue 或 Nuxt 应用程序中运行 Buoy .

## 安装

```sh
npm install @buoy-gg/vue
```

也可以使用：`pnpm add @buoy-gg/vue`、`yarn add @buoy-gg/vue`、`bun add @buoy-gg/vue`

## README

# Vue 和 Nuxt 的缓冲

Buoy在Vue 3.3和上行,由Vite所建,为β. 它在Nuxt 4也运行. 你的应用程序都保留下来了. Buoy将React用于自己的屏幕并带去. 整个指南是 [Vue 页面](https://buoy.gg/buoy/latest/docs/web/vue)。 。 。 .

## 安装并签名

从您的应用程序文件夹中运行这些 :

```sh
npm install --save-dev @buoy-gg/core @buoy-gg/vue @buoy-gg/network
npx --package=@buoy-gg/core buoy login
```

以同样的方式增加更多的工具. 对所有Buoy包使用相同的版本. `buoy login` 写入 `VITE_BUOY_KEY` 到文件 Git 忽略.

## 在Vue 设置

添加 Vite 插件 :

```ts
// vite.config.ts
import vue from '@vitejs/plugin-vue';
import { buoy } from '@buoy-gg/core/vite';

export default defineConfig({ plugins: [vue(), buoy()] });
```

添加Buoy插件到您的应用程序中 :

```ts
import { buoy } from '@buoy-gg/vue';

createApp(App).use(router).use(pinia).use(buoy).mount('#app');
```

就这样. Vite 插件会找到您的工具并添加早期的钩子 . 它让Buoy离开活生生的建筑. `app.use(buoy)` 读取您的密钥,并在应用程序挂起时启动 Buoy . 它自己发现了Vue路由器,Pinia和Vue Query. 它阻止了Buoy 当你的应用卸载.

## 在 Nuxt 中设置

```ts
// nuxt.config.ts
export default defineNuxtConfig({ modules: ['@buoy-gg/vue/nuxt'] });
```

就这样. 带入选项 `buoy` 键,作为简单数据. 对于有功能的选项,设置 `buoy: { setup: false }`。 。 。 . 那就打电话 `nuxtApp.vueApp.use(buoy, options)` 在您的客户端插件中.

## 选项

`app.use(buoy, options)` 选择与 `mountBuoy` 从 `@buoy-gg/core/web`,加上这些:

| 选项 | 它会做什么 |
| --- | --- |
| `load` | 用Buoy装入应用程序设置 。 使用 dev 检查以删除文件 |
| `modules` | 您自己的工具列表, 替换插件 |
| `enableInRelease` | 开始Buoy的发行建筑。 设定 `buoy({ enableInRelease: true })` 还有 |
| `onMount` | Buoy一起来就叫停机功能 |
| `onDestroy` | Buoy停站时打电话 |

`startBuoy(options)` 启动 Buoy 没有 Vue 应用程序 . 过 `router`, (中文(简体) ), `pinia` 财务报告和审定财务报表 `queryClient` 你自己来.

## 皮尼亚和裁判员

Pinia在Zustand工具中独家存储展出. 显示平地 `ref` 或者说 `reactive`,包起来:

```ts
import { buoyVueRef } from '@buoy-gg/vue/pinia';

app.use(buoy, { zustandStores: { count: buoyVueRef(count) } });
```

您可以在工具中读取并编辑它们. 编辑保存您没有更改的字段 .

## 入境点

| 导入 | 持有 |
| --- | --- |
| `@buoy-gg/vue` | `buoy`, (中文(简体) ), `startBuoy` |
| `@buoy-gg/vue/register` | 早钩子. Vite 插件为您添加 |
| `@buoy-gg/vue/router` | `connectBuoyRouter`,用于手动路由器链接 |
| `@buoy-gg/vue/pinia` | `watchPiniaStores`, (中文(简体) ), `buoyVueRef` |
| `@buoy-gg/vue/highlights` | `connectBuoyHighlights`,用于手举高亮 |
| `@buoy-gg/vue/nuxt` | Nuxt 模块 |

每个应用程序条目都有 `buoy-disabled` 建造它什么也做不了. Vite 插件选中它为 prod 构建 .

## 常见问题

### @buoy-gg/vue 是什么？

在 Vue 或 Nuxt 应用程序中运行 Buoy \.

### 如何安装 @buoy-gg/vue？

在项目目录运行 npm install @buoy-gg/vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（\>=3\.3 \<4）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @buoy-gg/vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @buoy-gg/vue 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @buoy-gg/vue 可以商用吗？

@buoy-gg/vue 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。

### @buoy-gg/vue 的下载量有多少？

根据 npm 官方下载统计，@buoy-gg/vue 在 2026/10/09 – 2026/11/07 这 30 天内被下载 2,358 次，日均约 79 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @buoy-gg/vue 还在维护吗？

最新版本 7\.0\.87 发布于 2026/11/07（1 天前）；至今共发布 14 个版本，其中过去 12 个月发布了 14 个；首次发布于 2026/10/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。