workspace/code/g3soft-libs/docs/content/guide/getting-started.md

title, description

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

快速开始

安装

pnpm add @g3soft/ui @g3soft/tokens

vue 由宿主项目提供（peerDependencies），请确保已安装 Vue 3。

引入设计变量

在应用入口引入一次，组件样式全部依赖这套变量：

// main.ts
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')

换肤

组件的颜色与尺寸一律引用 --g3-* 变量，定制只需覆盖同名变量，不必改组件代码：

:root {
  --g3-color-primary: #1677ff;
  --g3-radius: 6px;
}

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

document.documentElement.dataset.g3Theme = 'dark'

下一步

• 浏览组件参考
• 了解设计变量的设计取舍