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