@ eos- ui/ veue
Vue 的组件库 。 高对比并默认一致,可与几行相重命名.
npm install @eos-ui/vue
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");
<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更改页面某一部分的主题、语言或方向. - 消息可以是复数对象(
{ one, other }以及当地人的其他类别)n。 。 。 .resultsCount, (中文(简体) ),rows, (中文(简体) ),rowsAnnounce财务报告和审定财务报表rangeDone来. defineTheme()(从@eos-ui/tokens) 构建一个主题brand, (中文(简体) ),accent以及其他投入和检查其对比.- 图标:内置的 Phosphoor 集,或 Lucide, Tabler, Heroicons, Phosphoor (Vue), 图标化或你自己的集 (
@eos-ui/vue/icons,参见 带上自己的图标) (中文(简体) ). - 每个组件路径 :
@eos-ui/vue/components/EButton(任何构成部分),和@eos-ui/vue/plugin页:1createEos财务报告和审定财务报表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。见 可编曲。 。 。 . @eos-ui/vue/llms.txt财务报告和审定财务报表llms-full.txt给 AI 编码助理一个索引和完整的文件.- 没有插件的组件用英语和美元工作.
坚果
导入样式表 nuxt.config.ts,在 Nuxt 插件中安装插件,并将主题放到服务器上 <head> 与 themeCss()。 。 。 . createEos 仅在浏览器中触及文档: theme 它在应用程序安装后将主题添加为样式表, 因此没有 <style> 第一幅画没有主题.
// nuxt.config.ts
export default defineNuxtConfig({ css: ["@eos-ui/vue/style.css"] });
// 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。 。 。 .
来源、问题和贡献麻省理工学院有执照.