vue3-bcui

Border Card UI

Border Card UI for Vue 是一个偏卡片化、扁平、轻拟物过渡感的 Vue 3 组件库。这个仓库目前处在一次系统翻新阶段，目标是把早期实现整理成更适合继续维护的组件库工程。

当前基线

• Vue 3
• Vite 7
• TypeScript 6.x（依赖已切换到 ^6.0.3）
• Font Awesome 6

开发命令

yarn install
yarn dev
yarn serve
yarn build
yarn build:lib
yarn build:demo
yarn preview
yarn lint
yarn lint:fix
yarn typecheck

目录说明

packages/
  <component>/index.vue   组件实现
  <component>/index.ts    组件导出与安装入口
  shared/                 共享运行时能力
  types.ts                公共类型定义
examples/                 演示站与组件文档
typings/                  Vue 与全局类型补充
dist/                     组件库打包产物
docs-dist/                演示站打包产物

组件库约定

• 公共类型统一放在 packages/types.ts。
• 组件安装统一通过 packages/shared/runtime.ts 中的 withInstall() 处理。
• 需要暴露全局能力的组件统一挂在 $bcui 下，并通过合并注入，避免互相覆盖。
• 组件名、目录名和导出名保持稳定，优先兼容现有示例站。
• build:lib 负责产出 npm 包内容，build:demo 负责产出演示站。

更完整的维护约定见 CONTRIBUTING.md。

如果你要从旧版接入迁移，先看 MIGRATION.md。

使用方式

import { createApp } from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

import Bcui from 'vue3-bcui'
import 'vue3-bcui/style.css'
import 'vue3-bcui/themes/dark.css'

library.add(fas)

const app = createApp(App)
app.component('font-awesome-icon', FontAwesomeIcon)
app.use(Bcui)

说明：当前组件仍依赖全局注册的 font-awesome-icon 组件，这部分我保留了向后兼容，没有在这轮翻新里强行改掉。

主题切换

如果项目只需要固定主题，继续直接引入下面任一文件即可：

import 'vue3-bcui/themes/light.css'
import 'vue3-bcui/themes/dark.css'

如果项目需要在运行时切换主题，推荐改用组合主题文件：

import 'vue3-bcui/style.css'
import 'vue3-bcui/themes.css'

import { setBcuiTheme, toggleBcuiTheme } from 'vue3-bcui'

setBcuiTheme('light')
toggleBcuiTheme()

themes.css 默认提供 light 主题变量；切到 dark 时会在根节点上写入 data-bcui-theme="dark"。

设计来源

Border Card UI 最早来自作者在 WPF 项目中的一套卡片化界面语言，后来逐渐吸收了 SSTB、TMore、PCL2 以及部分 Windows 11 的设计元素，最终沉淀成现在这套偏轻量、偏内容容器导向的组件风格。

说明

• 当前仓库已经从 Vue CLI 迁移到 Vite，Node 版本建议使用 20.19+ 或 22.12+。
• packages/dist 中的类型已经迁移到源码目录；旧路径目前保留了兼容导出。