# @fieldia/vue 中文文档

规范地址：https://npmcn.com/package/%40fieldia/vue/

版本：0\.36\.1
npm 元数据更新时间：2026-10-28T10:18:13.569Z
中文译文更新时间：2026-11-14T17:54:25.936Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fieldia/vue
原文对照：https://npmcn.com/package/%40fieldia/vue/?lang=original
项目主页：https://fieldia.dev/
源码仓库：https://github.com/fieldia-dev/fieldia

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

- 包体积（解压后）：118 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：4 个
- peer 依赖：vue ^3\.3\.0
- 首次发布：2026-10-02T07:49:18.160Z
- 最新版本发布：2026-10-28T10:18:13.362Z
- 近 30 天下载量：3908（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：49（近 12 个月 49 个）

## 中文简介

Vue捆绑为Fieldia:在平面-DOM取景器上,自定义字段为Vue组件,槽为Vue槽.

## 安装

```sh
npm install @fieldia/vue
```

也可以使用：`pnpm add @fieldia/vue`、`yarn add @fieldia/vue`、`bun add @fieldia/vue`

## README

# @ fieldia/ veue (英语)

[外地](https://fieldia.dev/) vue 3 中的窗体 : 一个薄的外壳 `@fieldia/viewer`,所以一个页面看起来和行为都与任何其他框架相同.

```sh
npm install @fieldia/vue
```

```vue
<script setup lang="ts">
import { FieldiaForm } from '@fieldia/vue';
import { createMemoryDataSource } from '@fieldia/core';
import page from './customer.page.json';

const dataSource = createMemoryDataSource();
</script>

<template>
  <FieldiaForm :page="page" :data-source="dataSource" :record-id="1" skin="underline" />
</template>
```

单位 **坚果** (或任何服务器上的 Vue),给出组件 `first-paint`: 使表单在服务器上的第一个涂料——其值用平方 HTML, in Fieldia的外观——浏览器在任何脚本和水合物之前显示的外观 即是;观者在它被抽取而装满之后,就把它挂在上面 同时键入( e)`@fieldia/viewer/server`:

```vue
<script setup lang="ts">
const { data: record } = await useFetch(`/api/enquiries/${useRoute().params.id}`);
const nonce = useNuxtApp().ssrContext?.event.context.nonce; // with a strict Content-Security-Policy
</script>

<template>
  <FieldiaForm :page="page" :data-source="dataSource" :record-id="record.id" :nonce="nonce" :first-paint="{ values: record }" />
</template>
```

自定义字段可以是 Vue 组件(`fieldTypes`),槽内容输入命名 插槽,以及 `useFormState(form)` 给你一个表格状态 作为裁判。 列表页面 通过 `@open-record` 活动.

表格上的事件是.. `change`, (中文(简体) ), `save`, (中文(简体) ), `send`, (中文(简体) ), `step`, (中文(简体) ), `run` - 和 `@action`处理器可能响应按钮或按钮 `call` 步骤( 是 `onAction` 道具,它返回的是什么:

```vue
<FieldiaForm
  :page="page"
  :data-source="dataSource"
  :pages="pages"
  @action="({ action, values }) => (action === 'check_stock' ? { values: { price: priceOf(values.product) } } : undefined)"
  @change="({ field, value, by }) => {}"
  @save="({ recordId, values }) => {}"
  @send="({ values }) => {}"
  @step="({ step }) => {}"
  @run="({ id, result }) => {}"
/>
```

`host` 财务报告和审定财务报表 `on-open` 是查看者自己的选项(参见 `@fieldia/viewer`; 计 数 控件来源 `@ready` 已经 `on`, (中文(简体) ), `setValues` 财务报告和审定财务报表 `run`。 。 。 .

一个页面带有 `continueLater` 打开您服务器上保存的草稿 `:resume="route.query.resume"`,然后继续提供链接键 `@draft="({ key, later, saved }) => …"` 已被告知每份草稿。 一个新的 `resume` 打开这个草案,作为一个新的 `record-id` 打开记录.

从链接中填充字段的页面( E)`prefill`阅读浏览器的地址; 在服务器上或在其他页面中显示的应用程序会给出链接 知道吗 `:url="route.fullPath"`,地址,或 `:url="{ agent: 'mona' }"`A级 新设 `url` 从它开始表格.

**在你的应用程序离开前**,请检查一下: `await handle.form.leave()` 在路由器中 `beforeRouteLeave`,在删除前 `<FieldiaForm>`,在改变再次挂起它的道具之前`page`, (中文(简体) ), `form`, (中文(简体) ), `dataSource`, (中文(简体) ), `recordId`, (中文(简体) ), `resume`, (中文(简体) ), `url`, (中文(简体) ), `user`, (中文(简体) ), `context`, (中文(简体) ), `dir`, (中文(简体) ), `locale`, (中文(简体) ), `labels`中的名称 `functions`) (中文(简体) ). 立即卸下起落架,所以没有别的东西能把人留在那里. 这个 等待途中的保存,然后问 "放弃你的改变?" 工作有危险,当他们选择留下来时会回答错误. `warn-on-leave` 已经 浏览器本身的 Back, 重新装入或关闭标签先询问是否有更改 未保存 .

一个字段的组件或槽的内容,只要它能使它保持到 地点:它显示一个小盒子,它命名它, `@error="(error, where) => …"` 实值 告诉了,而且这个错误没有 越远Vue的树。 观众拒绝的一页说 为什么在表格的位置, `@error` 被告知, 应用程序会挂载。 麻省理工学院有执照.

## 常见问题

### @fieldia/vue 是什么？

Vue捆绑为Fieldia:在平面-DOM取景器上,自定义字段为Vue组件,槽为Vue槽\.

### 如何安装 @fieldia/vue？

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

### @fieldia/vue 支持 TypeScript 吗？

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

### @fieldia/vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fieldia/vue 可以商用吗？

@fieldia/vue 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fieldia/vue 的下载量有多少？

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

### @fieldia/vue 还在维护吗？

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