20261008173212

code/g3soft-libs/docs/content/ui/1.usage/.navigation.yml

@@ -0,0 +1,2 @@
+title: 使用
+icon: i-lucide-book-open

code/g3soft-libs/docs/content/ui/1.usage/getting-started.md

@@ -0,0 +1,70 @@
+---
+title: 快速上手
+description: 安装、引入并在项目中使用 UI 组件库
+---
+
+# 快速上手
+
+本节介绍如何在项目中安装、引入并使用 UI 组件库。
+
+## 安装
+
+```bash
+pnpm add @g3soft/ui @g3soft/tokens
+```
+
+`vue` 由宿主项目提供（`peerDependencies`），请确保已安装 Vue 3。
+
+## 引入设计变量
+
+在应用入口引入一次，组件样式全部依赖这套变量：
+
+```ts
+// main.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')
+```
+
+## 换肤
+
+组件的颜色与尺寸一律引用 `--g3-*` 变量，定制只需覆盖同名变量，不必改组件代码：
+
+```css
+:root {
+  --g3-color-primary: #18181b;
+  --g3-radius: 6px;
+}
+```
+
+暗色主题由 `html[data-g3-theme='dark']` 触发：
+
+```ts
+document.documentElement.dataset.g3Theme = 'dark'
+```
+
+## 下一步
+
+- 浏览[组件参考](/ui/general/button)
+- 了解[设计变量](/explain/why-tokens)的设计取舍