# @eos-ui/vue 中文文档

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

版本：0\.20\.0
npm 元数据更新时间：2026-10-28T02:57:51.923Z
中文译文更新时间：2026-11-13T19:15:03.047Z
软件包许可：MIT

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

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

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

- 包体积（解压后）：2.3 MB，727 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：3 个
- peer 依赖：vue ^3\.5\.0，@iconify/vue ^5\.0\.0
- 首次发布：2026-10-19T06:14:58.771Z
- 最新版本发布：2026-10-28T02:57:51.593Z
- 近 30 天下载量：5488（2026-10-14 至 2026-11-12，npm 官方下载统计）
- 已发布版本数：33（近 12 个月 33 个）

## 中文简介

eos:用于Vue的组件库.

## 安装

```sh
npm install @eos-ui/vue
```

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

## README

# @ eos- ui/ veue

Vue 的组件库 。 高对比并默认一致,可与几行相重命名.

[文档、现场实例和主题操场](https://eos.dame.gg/)

```bash
npm install @eos-ui/vue
```

```ts
import { createApp } from "vue";
import { createEos } from "@eos-ui/vue";
import "@eos-ui/vue/style.css"; // once, in your entry file

createApp(App)
  .use(
    createEos({
      locale: "en-CA",
      currency: "CAD",
      theme: { brand: "#2c95b4", radius: "round" },
    }),
  )
  .mount("#app");
```

```vue
<script setup lang="ts">
import { ref } from "vue";
import { ETextField, EButton } from "@eos-ui/vue";
const email = ref("");
</script>

<template>
  <ETextField v-model="email" label="Email" type="email" required />
  <EButton>Continue</EButton>
</template>
```

-   一个样式表(约21 kB gziped), 导入一次: `@eos-ui/vue/style.css` 即使没有插件也需要。 该档案中的所有CSS舰只(没有每个组件CSS). JavaScript没有CSS的导入,因此服务器渲染不需要捆绑器设置.
-   要求:只有无害环境管理,22号节点或以后,3.5号或以后。 摇树由你的捆绑工完成. 您的捆绑器必须替换 `process.env.NODE_ENV` 以字面表示,如Vite,webpack,Rollup,esbuild和Nuxt默认做. 库会读取它,以保留开发警告(一个失败的对比度)出出生产建筑;有一个不定义它的捆绑器,警告会继续,你可以关闭对比度与 `warnOnContrast: false`。 。 。 .
-   字体是选入的 : `@eos-ui/vue/fonts-self-hosted.css` 服务包中文件的默认类型; `@eos-ui/vue/fonts.css` 从Google字体组装入,与Google共享访客的IP地址; `@eos-ui/vue/fonts-fallback.css` 仅拥有量度相配后退面孔。 由于没有,主题使用系统字体.
-   万事俱备地坐落于阶梯层 `e.*`,所以你自己的CSS胜出 没有特定的战斗.
-   插件选项 : `locale`, (中文(简体) ), `currency`, (中文(简体) ), `dir`, (中文(简体) ), `messages`, (中文(简体) ), `icons`, (中文(简体) ), `theme`, (中文(简体) ), `themeTarget`, (中文(简体) ), `portalTarget`, (中文(简体) ), `warnOnContrast` 财务报告和审定财务报表 `applyTheme` (单位:千美元)`false` 当页面传送主题 CSS 本身。 没有 `theme` 无应用 : `style.css` 带有默认主题。 A 类 `theme` 作为符号层的样式表进入文档,所以您自己的CSS胜出. [`EConfigProvider`](https://npmcn.com/package/%40eos-ui/vue/src/components/ConfigProvider/README.md) 更改页面某一部分的主题、语言或方向.
-   消息可以是复数对象(`{ one, other }` 以及当地人的其他类别) `n`。 。 。 . `resultsCount`, (中文(简体) ), `rows`, (中文(简体) ), `rowsAnnounce` 财务报告和审定财务报表 `rangeDone` 来.
-   `defineTheme()` (从 [`@eos-ui/tokens`](https://npmcn.com/package/%40eos-ui/tokens)) 构建一个主题 `brand`, (中文(简体) ), `accent` 以及其他投入和检查其对比.
-   图标:内置的 Phosphoor 集,或 Lucide, Tabler, Heroicons, Phosphoor (Vue), 图标化或你自己的集 (`@eos-ui/vue/icons`,参见 [带上自己的图标](https://npmcn.com/package/%40eos-ui/vue/src/icons/README.md)) (中文(简体) ).
-   每个组件路径 : `@eos-ui/vue/components/EButton` (任何构成部分),和 `@eos-ui/vue/plugin` 页:1 `createEos` 财务报告和审定财务报表 `themeCss`。它们不包含内置图标集,由包根登记; `import "@eos-ui/vue/icons/builtin"` 把它带回来.
-   `EosResolver` 从 `@eos-ui/vue/resolver` 自动导入组件 `unplugin-vue-components`。它不导入样式表,除非您通过 `{ css: true }`。 。 。 .
-   导入软件包类型 `$e` (配置)在模板中. `createEos()` 没有注册组件,所以其全局类型是选入的: `app.component("EButton", EButton)`,添加 `import type {} from "@eos-ui/vue/globals"` (或 `"types": ["@eos-ui/vue/globals"]` 内 `tsconfig.json`) (中文(简体) ). 与 `unplugin-vue-components` 您不需要它: 插件会自己写 `components.d.ts`。 。 。 .
-   用于共同需要的可构成物: `useAnnouncer` (屏幕阅读器公告), `useShortcuts` (键盘快捷键), `useCopy`, (中文(简体) ), `useToast`。见 [可编曲](https://npmcn.com/package/%40eos-ui/vue/src/composables/README.md)。 。 。 .
-   `@eos-ui/vue/llms.txt` 财务报告和审定财务报表 `llms-full.txt` 给 AI 编码助理一个索引和完整的文件.
-   没有插件的组件用英语和美元工作.

## 坚果

导入样式表 `nuxt.config.ts`,在 Nuxt 插件中安装插件,并将主题放到服务器上 `<head>` 与 `themeCss()`。 。 。 . `createEos` 仅在浏览器中触及文档: `theme` 它在应用程序安装后将主题添加为样式表, 因此没有 `<style>` 第一幅画没有主题.

```ts
// nuxt.config.ts
export default defineNuxtConfig({ css: ["@eos-ui/vue/style.css"] });
```

```ts
// plugins/eos.ts
import { createEos, defineTheme, themeCss } from "@eos-ui/vue";

const theme = defineTheme({ brand: "#2c95b4", radius: "round" });

export default defineNuxtPlugin((nuxtApp) => {
  // The <style> below carries the theme on the server and in the browser, so the plugin adds no second copy.
  nuxtApp.vueApp.use(createEos({ locale: "en-CA", currency: "CAD", theme, applyTheme: false }));
  useHead({
    style: [{ id: "eos-theme", innerHTML: themeCss(theme) }],
    htmlAttrs: { lang: "en-CA", dir: "ltr" },
  });
});
```

部件在服务器上渲染而无 `document`创建主题 `defineTheme` 并给同样的一个 `createEos` 财务报告和审定财务报表 `themeCss`,所以服务器和浏览器同意. `applyTheme: false` 不需要 : 没有它, 浏览器也会得到插件本身的主题复制件, 范围缩小到 `:root[data-e-theme]`,这又是同样的符号。 插件设置 `lang` 财务报告和审定财务报表 `dir` 打开 `<html>` 仅放在浏览器中,所以设置为服务器 `htmlAttrs`。 。 。 .

[来源、问题和贡献](https://github.com/Dame-G/eos)麻省理工学院有执照.

## 常见问题

### @eos-ui/vue 是什么？

eos:用于Vue的组件库\.

### 如何安装 @eos-ui/vue？

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

### @eos-ui/vue 支持 TypeScript 吗？

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

### @eos-ui/vue 支持 ESM 还是 CommonJS？

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

### @eos-ui/vue 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @eos-ui/vue 可以商用吗？

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

### @eos-ui/vue 的下载量有多少？

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

### @eos-ui/vue 还在维护吗？

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