@db-ux/v-核心组件
包含所有样式和组件的 Vue 库 DB UX 设计系统(技术部件)。 。 。 . 我们还提供了有关具体组成部分的更多信息。 这个信息在我们 设计系统文件。 。 。 .
安装
pnpm add @db-ux/v-core-components @db-ux/core-components @db-ux/core-foundations --save-dev
型态依赖
虚拟插件
如果你使用维特,你可以使用 @db-ux/core-vite-plugin 它简化了 CSS 设置为单一导入.
pnpm add @db-ux/core-vite-plugin --save-dev
将插件添加到您的 vite.config.ts数字 :
import { defineConfig } from "vite";
import dbUxPlugin from "@db-ux/core-vite-plugin";
export default defineConfig({
plugins: [dbUxPlugin()]
});
然后导入您的 CSS 文件的插件 :
/* style.css */
@import "@db-ux/core-vite-plugin/index.css";
📖 学习更多关于 @db-ux/core-vite-plugin 节点软件包
PostCSS 插件( 建议)
我们建议使用 @db-ux/core-postcss-plugin 以减小你的捆绑大小。 它通过解析 CSS 自定义属性来平分 var(), (中文(简体) ), calc(), (中文(简体) ), color-mix(),以及 light-dark() ,删除未使用的申报.
pnpm add @db-ux/core-postcss-plugin --save-dev
装入 vite.config.ts数字 :
import { defineConfig } from "vite";
import { dbUxFlatten } from "@db-ux/core-postcss-plugin";
export default defineConfig({
css: {
transformer: "postcss", // required for Vite 8+ (default: 'lightningcss')
postcss: {
plugins: [dbUxFlatten()]
}
}
});
📖 学习更多关于 @db-ux/core-postcss-plugin 节点软件包
手动 CSS 设置
如果您没有使用Vite或偏好手动设置, 请导入您 CSS 主文件中的样式 :
/* style.css */
@layer whitelabel-theme, db-ux;
/* You may want to include another theme here, this is a whitelabel theme! So instead of including the following line of code, please have a look at the DB Theme section */
@import "@db-ux/core-foundations/build/styles/theme/rollup.css"
layer(whitelabel-theme);
@import "@db-ux/core-components/build/styles/bundle.css" layer(db-ux);
// main.ts
import "./style.css";
视频 8
从Vite 8开始,默认的 CSS 修饰符被修改为 闪电CSS,它为DB UX设计系统(例如. light-dark() CSS 函数). 保持 CSS 输出稳定, 配置 vite.config.ts 像这样:
// vite.config.ts
export default defineConfig({
build: {
cssMinify: "esbuild"
}
});
或者,您可以定义 浏览器列表 基于您个人浏览器支持策略——它可能与默认定义的Vite 8 列表(从2020年代初开始的目标浏览器)完全不同:
// Note: You need to install the required packages first:
// npm install -D lightningcss browserslist
// vite.config.ts
import { browserslistToTargets } from "lightningcss";
import browserslist from "browserslist";
export default defineConfig({
css: {
lightningcss: {
targets: browserslistToTargets(
browserslist(
">= 0.5%, last 2 major versions, Firefox ESR, not dead"
)
)
}
}
});
DB 主题
若您正在为 Deutsche Bahn 建立一个网站或应用程序,您还需通过 @db-ux/db-theme 节点包(甚至也可以作为内源节点包提供,如该包所描述的README).
使用量
<script setup lang="ts">
import { DBButton } from "@db-ux/v-core-components";
</script>
<template>
<DBButton variant="brand">Add item to cart</DBButton>
</template>
活动
我们添加 v-model 支持它向每个变化开火.
但你可以使用正常的 @ 事件也一样.
这一例子中的两种投入都采取同样的做法:
<script setup lang="ts">
import { DBInput } from "@db-ux/v-core-components";
import { ref } from "vue";
const input = ref("");
</script>
<template>
<DBInput
label="Inputfield"
name="input-name"
v-model:value="input"
></DBInput>
<DBInput
label="Inputfield"
name="input-name"
:value="input"
@change="(e) => (input = e.target.value)"
></DBInput>
</template>
AI 代理支持
对于使用GitHub Copilot或Amazon Q等AI编码助理的开发者,我们提供 @db-ux/agent-cli 自动将 DB UX 设计系统文档添加到您的仓库的工具.
快速启动
在您的仓库中运行此命令 :
npx @db-ux/agent-cli
这将创建或更新 .github/copilot-instructions.md 根据您安装的组件文档 @db-ux 软件包,帮助AI代理商提供更好的建议.
📖 学习更多关于 @db-ux/agent-cli 节点软件包
代码质量
为了在您的 Vue 项目中强制正确使用 DB UX 设计系统组件, 我们提供 @db-ux/core-eslint-plugin ESLint 插件 .
安装
pnpm add eslint @db-ux/core-eslint-plugin vue-eslint-parser @typescript-eslint/parser --save-dev
设置
// eslint.config.js
import dbUx from "@db-ux/core-eslint-plugin";
import vueParser from "vue-eslint-parser";
import tsParser from "@typescript-eslint/parser";
export default [
{
files: ["**/*.vue"],
languageOptions: {
parser: vueParser,
parserOptions: {
parser: tsParser,
ecmaVersion: "latest",
sourceType: "module"
}
},
plugins: {
"db-ux": dbUx
},
rules: dbUx.configs.recommended.rules
}
];
📖 学习更多关于 @db-ux/core-eslint-plugin 节点软件包
样式林
为了在您的 CSS/ SCSS 中验证对 DB UX 设计系统符号的正确使用, 请使用 @db-ux/core-stylelint 插件 .
安装
pnpm add stylelint @db-ux/core-stylelint --save-dev
设置
添加到您的 .stylelintrc.json数字 :
{
"plugins": ["@db-ux/core-stylelint"],
"rules": {
"db-ux/use-spacings": [true],
"db-ux/use-sizing": [true],
"db-ux/use-border-width": [true],
"db-ux/use-border-radius": [true],
"db-ux/use-border-color": [true]
}
}
📖 学习更多关于 @db-ux/core-stylelint 节点软件包
德国Bahn品牌
由于我们想在数字化旅程中完全支持我们的用户和客户,即使使用我们提供的这个产品代码,Deutsche Bahn品牌和商标的使用也有明确的指导方针和限制; Deutsche Bahn完全保留了对Deutsche Bahn品牌的所有权利,尽管我们正在提供DB UX Design System产品的代码,根据Apache 2.0许可证可以自由使用并发布. 请看看我们的品牌门户 https://marketingportal.extranet.deutschebahn.com/ 页面存档备份,存于互联网档案馆 就任何品牌问题与谁联系.
对于德国Bahn网站和应用程序以外的任何用途,你不得使用任何德国Bahn品牌和 设计资产以及受保护的特征和商标,用于不包括DB主题.
捐款
发言非常受欢迎,请参看 捐款指南。 。 。 .
行为守则
作为成员、贡献者和领导人,我们保证参与我们的工作 人人无骚扰的体验 《公约》的行为守则。 。 。 .
许可证
这个项目的许可证根据 阿帕奇 - 2.0。 。 。 .