# @flatfile/vuejs 中文文档

规范地址：https://npmcn.com/package/%40flatfile/vuejs/

版本：3\.0\.1
npm 元数据更新时间：2026-04-23T23:55:04.150Z
中文译文更新时间：2026-11-14T22:36:31.477Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：1.1 MB，9 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：2 个
- 首次发布：2021-04-15T15:59:07.913Z
- 最新版本发布：2022-08-04T22:27:15.122Z
- 近 30 天下载量：2679（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 0 个）

## 中文简介

Vue.js 平面文件适配器

## 安装

```sh
npm install @flatfile/vuejs
```

也可以使用：`pnpm add @flatfile/vuejs`、`yarn add @flatfile/vuejs`、`bun add @flatfile/vuejs`

## README

# 平面文件 Vue.js 组件 - @ flatfile/ vuejs

## [![npm](https://img.shields.io/npm/v/@flatfile/vuejs.svg?label=npm%20version&color=2EBF6A&style=for-the-badge)](https://www.npmjs.com/@flatfile/vuejs) [![Minzipped Size](https://img.shields.io/bundlephobia/minzip/@flatfile/vuejs?color=794cff&style=for-the-badge)](https://bundlephobia.com/result?p=@flatfile/vuejs) [![NPM Downloads](https://img.shields.io/npm/dw/@flatfile/vuejs.svg?color=8c66ff&style=for-the-badge)](https://www.npmjs.com/@flatfile/vuejs) [![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge&color=794cff)](https://npmcn.com/LICENSE)

> 注: 如果您从以前的版本( 0. x) 升级, v3+ 将带来一些更新并打破更改

#### 打破变化:

注意最新版本 `@flatfile/vuejs` 3+ 使用新软件 `@flatfile/sdk` 在它下面完全改变与平面文件适配器相互作用的 API 表面 .

[有关这些变化的更多信息请访问InfoFinland上的](https://flatfile.com/docs/implementing-embeds/)

现在只需要1个投入,即: `:token` (你必须从你的后端收到).

[更多关于在此生成托肯语的内容](https://flatfile.com/docs/sdk/)

* * *

## 以 Flatfile (Vue.js) 开始

我们让你从Flatfile开始 用新的Flatfile组件 这是你需要知道的开始.

首先通过 npm 安装依赖性 :

```bash
npm install @flatfile/vuejs@3
```

这可以让你进入 `<flatfile-button />` 以及和我们新的SDK相同的基本功能.

简单地将导入添加到您想要通过 Flatfile vuejs 适配器包含的组件中

```html
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'DemoComponent',
  components: {
    FlatfileButton,
  },
  // ...
}
```

现在在你的应用中 仅仅利用这个新的 `<flatfile-button>` 组件,但要确保通过所需的1个道具,(和/或任何您申请所需的可选道具).

### 1个所需财产是:

-   `:token` \[你需要从后端得到\]

[读到这里](https://flatfile.com/docs/implementing-embeds/) 如何执行安全标志.

```html
<flatfile-button :token="token">
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',    
  })
}
</script>
```

* * *

以下是一个将适配器可用的许多其他可选参数/方法传递过来的例子.

```html
<flatfile-button 
  :token="token"
  :onInit="onInit"
  :onUpload="onUpload"
  :onLaunch="onLaunch"
  :onClose="onClose"
  :onComplete="onComplete"
  :onError="onError" 
  class="ff-button"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
  }),
  methods: {
    onInit: function (data) {
      console.log('onInit')
      console.log(data)
    },
    onUpload: function (data) {
      console.log('onUpload')
      console.log('data')
    },
    onLaunch: function (data) {
      console.log('onLaunch')
      console.log('data')
    },
    onClose: function (data) {
      console.log('onClose')
      console.log('data')
    },
    onComplete: function (data) {
      console.log('onComplete')
      console.log('data')
    },
    onError: function (error) {
      console.log('onError')
      console.log(error)
    },
  }
}
</script>
```

* * *

#### 其他选项

也可以通过 `mountUrl` 财务报告和审定财务报表 `apiUrl` 页:1 `<flatfile-button>`。 。 。 .

```html
<flatfile-button 
  :token="token"
  :mountUrl="mountUrl"
  :apiUrl="apiUrl"
>
  Upload to Flatfile!
</flatfile-button>

<script>
import { FlatfileButton } from '@flatfile/vuejs';

export default {
  name: 'App',
  components: {
    FlatfileButton,
  },
  data: () => ({
    token: 'Your_Token_You_Received_From_Your_Backend',
    mountUrl: 'mountUrl',
    apiUrl: '',
  }),
  // ... everything else
}
</script>
```

## 出版

更新更改日志(如果需要),更新软件包.json版本(semver),添加README所需的任何更新(如果需要),然后运行以下脚本:

```bash
npm run build:lib
npm publish
```

## 常见问题

### @flatfile/vuejs 是什么？

Vue\.js 平面文件适配器

### 如何安装 @flatfile/vuejs？

在项目目录运行 npm install @flatfile/vuejs，或使用 pnpm add / yarn add / bun add。

### @flatfile/vuejs 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flatfile\_\_vuejs 是否存在。

### @flatfile/vuejs 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @flatfile/vuejs 可以商用吗？

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

### @flatfile/vuejs 的下载量有多少？

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

### @flatfile/vuejs 还在维护吗？

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