@g3soft/ui
G3Soft 通用 UI 组件库(Vue 3 + TypeScript)。
安装
pnpm add @g3soft/ui @g3soft/tokens
vue 通过 peerDependencies 声明,由宿主项目提供,请确保宿主已安装 Vue 3。
使用
样式变量来自 @g3soft/tokens,在应用入口引入一次:
import '@g3soft/tokens'
按需引入组件:
<script setup lang="ts">
import { G3Button } from '@g3soft/ui'
</script>
<template>
<G3Button type="primary" @click="handleClick">主要按钮</G3Button>
</template>
也可以全量注册:
import { G3UI } from '@g3soft/ui'
import { createApp } from 'vue'
createApp(App).use(G3UI).mount('#app')
构建
pnpm build
产物在 dist/,包含 ESM 入口与类型声明。发布前会由 prepublishOnly 执行 publint 校验包结构。
约定
- 样式不写
scoped,统一用g3-前缀 + BEM 命名,便于消费方覆盖。 - 每个 CSS 变量都带兜底值,保证未引入 tokens 时组件仍可正常显示。
- 组件不写死颜色与尺寸,一律引用
--g3-*变量。