# @adyen/lume-vue3 中文文档

规范地址：https://npmcn.com/package/%40adyen/lume-vue3/

版本：1\.16\.1
npm 元数据更新时间：2026-10-21T10:05:04.807Z
中文译文更新时间：2026-11-06T19:50:52.901Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.1 MB，267 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：vue \>=3\.x
- 首次发布：2023-06-23T12:02:43.648Z
- 最新版本发布：2026-10-21T10:05:03.691Z
- 近 30 天下载量：2428（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：48（近 12 个月 8 个）

## 中文简介

Lume是一个Vue数据可视化组件库,由Typescript和D3所建.

## 安装

```sh
npm install @adyen/lume-vue3
```

也可以使用：`pnpm add @adyen/lume-vue3`、`yarn add @adyen/lume-vue3`、`bun add @adyen/lume-vue3`

## README

# 鲁姆

[![PR workflow](https://github.com/Adyen/lume/actions/workflows/pr.yml/badge.svg)](https://github.com/Adyen/lume/actions/workflows/pr.yml) [![MIT License](https://img.shields.io/badge/license-MIT)](https://github.com/Adyen/lume/blob/main/LICENSE) [![Netlify Status](https://api.netlify.com/api/v1/badges/a6c48bc7-b4d2-4be4-ad36-cbd353ab4f07/deploy-status)](https://app.netlify.com/sites/adyen-lume/deploys)

Lume是一组用于创建能讲述故事的数据可视化设计指南,以及用于执行故事的组件库的组合,为Vue应用程序所建.

> **说明:** 轻船 **两个** 软件包 - 一个兼容Vue 2.7,另一个兼容Vue 3. 第二项公布为: **`@adyen/lume-vue3`**。我们的例子导入 Vue 2.7 兼容的版本,但如果您使用 Vue 3,只需更新导入名称.

**[设计准则(网站)](https://lumedataviz.com/)**

-   [关于](https://npmcn.com/package/%40adyen/lume-vue3/#readme-about)
-   [开始](https://npmcn.com/package/%40adyen/lume-vue3/#readme-getting-started)
-   [发展](https://npmcn.com/package/%40adyen/lume-vue3/#readme-development)
-   [联系人](https://npmcn.com/package/%40adyen/lume-vue3/#readme-contacts)

## 关于

### 露梅有什么不一样的

得到强有力的数据可视化设计原则、准则和模式的支持  
用于 SVG 渲染和反应的 Leverages Vue  
第2.7和3段都有

### 堆栈

#### 依赖关系

-   [D3.js (英语)](https://d3js.org/) 用于计算
-   [阴道](https://vuejs.org/) 用于渲染
-   [波普尔.js (英语)](https://popper.js.org/) 用于工具提示功能

#### Dev 堆栈

-   [小时](https://pnpm.io/) 软件包管理
-   [维特](https://vitejs.dev/) 财务报告和审定财务报表 [网络软件包](https://webpack.js.org/) 用于捆绑
-   [萨斯](https://sass-lang.com/) 用于复杂/可重复使用的样式
-   [类型脚本](https://www.typescriptlang.org/) 类型检查
-   [类型脚本 ESLint](https://typescript-eslint.io/) 折叠 _(在 [斯林特- 插图- vue](https://eslint.vuejs.org/)(中文(简体) )_
-   [故事书](https://storybook.js.org/) 用于开发/展示组件
-   [维特](https://vitest.dev/) 单位测试

## 开始

### 安装

要安装 Lume, 请运行以下命令 :

#### 第 2.7 号+

```shell
$ npm install @adyen/lume
```

#### 第3组

```shell
$ npm install @adyen/lume-vue3
```

### 构成部分

您可以将 Lume 组件导入您的 Vue 应用程序 :

```ts
// SFC <script type="ts">

import { defineComponent } from 'vue';
import { LumeBarChart } from '@adyen/lume';

export default defineComponent({
  components: { LumeBarChart },
  ...
});
```

```ts
// Composition <script setup type="ts">

import { LumeBarChart } from '@adyen/lume';
```

### 插件

您也可以将 Lume 导入为您在全球 Vue 设置中安装的 Vue 插件 :

```ts
import Vue from 'vue';
import LumePlugin from '@adyen/lume/plugin';

import App from './my-app.vue';

Vue.use(LumePlugin);

const app = new Vue(App).$mount('#root');
```

### 样式

为了让Lume如愿以偿,你还需要导入它的风格.

#### CSS(全球)

```ts
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';

// Main styles
import '@adyen/lume/styles';
// (Optional) Lume font
import '@adyen/lume/font';

const app = new Vue(App).$mount('#root');
```

#### Sass( 全球)

```ts
// app/index/main.ts
import Vue from 'vue';
import App from './my-app.vue';

// Main styles
import '@adyen/lume/scss';
// (Optional) Lume font
import '@adyen/lume/font';

const app = new Vue(App).$mount('#root');
```

#### 中央支助系统(SFC)

```vue
<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style src="@adyen/lume/styles"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>
```

#### 萨斯语( SFC)

```vue
<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style lang="scss" src="@adyen/lume/scss"></style>
<!-- (Optional) Lume font -->
<style src="@adyen/lume/font"></style>
```

#### Sass( 带有覆盖)

```vue
<template>...</template>

<script>
...
</script>

<!-- Main styles -->
<style lang="scss">
@use '@adyen/lume/scss' with (
  $lume-font-family: 'Times New Roman'
);
</style>
```

## 发展

您可以复制此 repo 并使用 `pnpm` 以安装依赖。 我们用"故事书"来发展我们的特点.

### 夹克

在 Docker 容器内运行应用程序 :

1.  创建一个 `.env` 带有 Docker 图像 URL 的文件 :
    
    ```shell
      $ echo DOCKER_IMAGE={YOUR_IMAGE_HERE} >> .env
    ```
    
2.  启动您的容器 :
    
    ```shell
      $ docker compose up -d
    ```
    
3.  附加在您的终端中 :
    
    ```shell
      $ docker attach lume
    ```
    
4.  安装 `pnpm`数字 :
    
    ```shell
      $ npm i -g pnpm@11
    ```
    
5.  (可选,取决于您的多克图像) 将 npm 全局目录添加到 `PATH` 变量 :
    
    ```shell
      $ export PATH="${PATH}:/root/local/bin"
    ```
    

### 关于 Vue 版本

露梅船有2个包,每个Vue版本一个(2和3).

开发是在Vue 3中完成的,同时牢记同一源代码必须在两个Vue版本上同样发挥作用,因此一些新的Vue 3 API被限制,除非提供倒置.

#### 故事书

可通过运行以下命令提供故事本:

```shell
$ pnpm run storybook
```

每个图表组件都应该有自己的 `.stories` 文件,并将自动加载到故事本管理器.

##### 可用加词

-   [`addon-essentials`](https://www.npmjs.com/package/@storybook/addon-essentials)
-   [`addon-storysource`](https://www.npmjs.com/package/@storybook/addon-storysource)
-   [`addon-a11y`](https://www.npmjs.com/package/@storybook/addon-a11y)

### 释放

要生成发布 :

1.  创建释放分支并把它推向上游:
    
    ```shell
      $ git checkout -b release-[VERSION] && git push -u origin release-[VERSION]
    ```
    
2.  运行释放命令 :
    
    ```shell
      $ npm run release
    ```
    
3.  为发布分支创建 PR .
4.  合并后再出"GitHub"发行. 这之后将在国家预防机制公布新的释放.

这将提示您使用交互的 CLI 创建新版本、 标签、 更改日志条目和发布 .

### 路线图

| 特性 | 状态 |
| --- | --- |
| **图表** |  |
| 冲积(桑基)图 | ✅ |
| 单行图 | ✅ |
| 分组条形图 | ✅ |
| 堆叠的条形图 | ✅ |
| 所有条形图的横向方向 | ✅ |
| 线路图 | ✅ |
| 火花线图表 | ✅ |
| **特征** |  |
| A11 颜色 | 🚧 |
| A11y 准则 & impl. | ❌ |
| 黑暗主题 | ❌ |
| 在图例中选择数据集 | ❌ |

\- 写好了  
\- 妇女信息方案  
\- 来做

## 联系人

### 维护者

-   戈文德·斯里尼迪 [@ govind-srinidhi (英语)](https://github.com/govind-srinidhi)
-   乔奥·桑托斯 [@joao-m-santos (英语)](https://github.com/joao-m-santos)

### 贡献者

-   卢卡斯·范海利克胡伊曾 [@卢卡斯1981](https://github.com/Lucas1981)
-   薇薇安·约瑟夫 [@vivy27 (英语)](https://github.com/vivy27)

## 常见问题

### @adyen/lume-vue3 是什么？

Lume是一个Vue数据可视化组件库,由Typescript和D3所建\.

### 如何安装 @adyen/lume-vue3？

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

### @adyen/lume-vue3 支持 TypeScript 吗？

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

### @adyen/lume-vue3 支持 ESM 还是 CommonJS？

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

### @adyen/lume-vue3 可以商用吗？

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

### @adyen/lume-vue3 的下载量有多少？

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

### @adyen/lume-vue3 还在维护吗？

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