69 lines
1.1 KiB
Markdown
69 lines
1.1 KiB
Markdown
---
|
|
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)的设计取舍
|