1.2 KiB
1.2 KiB
title, description
| title | description |
|---|---|
| 快速上手 | 安装、引入并在项目中使用 UI 组件库 |
快速上手
本节介绍如何在项目中安装、引入并使用 UI 组件库。
安装
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: #18181b;
--g3-radius: 6px;
}
暗色主题由 html[data-g3-theme='dark'] 触发：
document.documentElement.dataset.g3Theme = 'dark'