---
title: 快速开始
description: 安装组件库并在项目中用起来
---

# 快速开始

## 安装

```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: #1677ff;
  --g3-radius: 6px;
}
```

暗色主题由 `html[data-g3-theme='dark']` 触发：

```ts
document.documentElement.dataset.g3Theme = 'dark'
```

## 下一步

- 浏览[组件参考](/reference/ui/button)
- 了解[设计变量](/explain/why-tokens)的设计取舍