# @dzikoysk/vue-vanilla 中文文档

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

版本：3\.4\.1
npm 元数据更新时间：2024-11-22T14:27:26.499Z
中文译文更新时间：2026-11-13T02:59:44.963Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：636 kB，81 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：@jsonforms/core 3\.4\.1，@jsonforms/vue 3\.4\.1，vue ^3\.2\.26
- 首次发布：2022-05-03T15:55:06.404Z
- 最新版本发布：2024-11-22T14:27:26.337Z
- 近 30 天下载量：3161（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：11（近 12 个月 0 个）

## 中文简介

JSON 表格用 Vue 3 香草制造器

## 安装

```sh
npm install @dzikoysk/vue-vanilla
```

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

## README

# JSON表格 - 更多表格. 减去代码

_闪烁眼中复杂的窗体_

贾森 表格通过利用JSON,JSON Schema和Javascript的能力,消除了用手书写全版表格的烦琐任务.

## Vue 香草制作人

这是JSON Forms Vue Vanilla 渲染器软件包,它提供了基于 HTML5 的渲染器集 [JSON 表单](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue)。 。 。 .

### JSON 表单 Vue 种子应用

看我们的 [JSON 表单 Vue 种子仓库](https://github.com/eclipsesource/jsonforms-vue-seed) 尽快开始.

### 快开始

安装 JSON 格式核心、 Vue 和 Vue Vanilla 渲染器

```bash
npm i --save @jsonforms/core @jsonforms/vue @jsonforms/vue-vanilla
```

将软件包添加到 `vue.config.js` 文件 :

```js
module.exports = {
  transpileDependencies: [
    '@jsonforms/core',
    '@jsonforms/vue',
    '@jsonforms/vue-vanilla',
  ],
};
```

使用 `json-forms` 用于您要渲染和移交渲染器集的每个窗体的组件.

```vue
<script>
import { JsonForms } from '@jsonforms/vue';
import { vanillaRenderers } from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

const renderers = [
  ...vanillaRenderers,
  // here you can add custom renderers
];

export default defineComponent({
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(renderers),

      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>
```

假設"香草放送"完全不应用CSS. 很快的开始,你可以使用 `@jsonforms/vue-vanilla/vanilla.css`。 。 。 .

关于JSON表格如何配置的更多信息,请参见 [读取 `@jsonforms/vue`](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue/README.md)。 。 。 .

### 样式

每个已渲染的 HTML 元素指定一个 CSS 类,用于样式 . 这一过程也可以被定制,以便每个元素宣布用户指定的CSS类. 因此,JSON Forms Vue Vanilla可以很容易地与任何CSS唯一的UI框架相融合.

您可以在“ ” 中找到默认的 CSS 类[默认样式.ts](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue-vanilla/src/styles/defaultStyles.ts)。 。 。 .

做你自己的课 `provide` 他们作为 `styles`。 。 。 . 这些 `styles` 替换 `defaultStyles`。 。 。 . 狦稱 `defaultStyles` 或把它们与你自己的课结合起来,你需要这样做在程序上,例如:

```vue
<script>
import { JsonForms } from '@jsonforms/vue';
import {
  defaultStyles,
  mergeStyles,
  vanillaRenderers,
} from '@jsonforms/vue-vanilla';
import { defineComponent } from 'vue';

// mergeStyles combines all classes from both styles definitions
const myStyles = mergeStyles(defaultStyles, {
  control: { root: 'my-control' },
});

export default defineComponent({
  name: 'app',
  components: {
    JsonForms,
  },
  data() {
    return {
      renderers: Object.freeze(vanillaRenderers),
      data: {
        number: 5,
      },
      schema: {
        properties: {
          number: {
            type: 'number',
          },
        },
      },
      uischema: {
        type: 'VerticalLayout',
        elements: [
          {
            type: 'Control',
            scope: '#/properties/number',
          },
        ],
      },
    };
  },
  methods: {
    onChange(event) {
      this.data = event.data;
    },
  },
  provide() {
    return {
      styles: myStyles,
    };
  },
});
</script>
<template>
  <json-forms
    :data="data"
    :schema="schema"
    :uischema="uischema"
    :renderers="renderers"
    @change="onChange"
  />
</template>
```

您也可以通过 : `options.styles` 属性. 在此指定的属性覆盖相应的属性 `defaultStyles` 或提供 `styles`。 。 。 . 此处未指定的属性返回到任意 `defaultStyles` 或提供 `styles`。 。 。 .

```js
{
  "type": "Control",
  "scope": "#/properties/name",
  "options": {
    "styles": {
      "control": {
        "root": "my-control-root"
      }
    }
  }
}
```

## 许可证

JSONForms项目根据麻省理工学院许可证获得许可. 见 [自由文件](https://github.com/eclipsesource/jsonforms/blob/master/LICENSE) 更多信息.

## 路线图

我们的行进图已经公布 [这里](https://github.com/eclipsesource/jsonforms/blob/master/ROADMAP.md)。 。 。 .

## 移徙

看我们的 [移徙指南](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) 当更新 JSON 表格时.

## 常见问题

### @dzikoysk/vue-vanilla 是什么？

JSON 表格用 Vue 3 香草制造器

### 如何安装 @dzikoysk/vue-vanilla？

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

### @dzikoysk/vue-vanilla 支持 TypeScript 吗？

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

### @dzikoysk/vue-vanilla 支持 ESM 还是 CommonJS？

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

### @dzikoysk/vue-vanilla 可以商用吗？

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

### @dzikoysk/vue-vanilla 的下载量有多少？

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

### @dzikoysk/vue-vanilla 还在维护吗？

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