快速上手

版本说明

当前组件库处于 迭代阶段，各组件的命名、Props 和 API 在正式版发布前可能会调整，请注意关注更新。

本节将帮助你快速在项目中使用 @gulcc/tabler-vue。

安装

pnpm

pnpm add @gulcc/tabler-vue

npm

npm install @gulcc/tabler-vue

yarn

yarn add @gulcc/tabler-vue

前置依赖

仅安装 @gulcc/tabler-vue 无法正常渲染样式和图标，必须一并安装以下依赖：

• @tabler/core — 提供基础 CSS 样式
• @tabler/icons-vue — 提供图标组件

pnpm add @tabler/core @tabler/icons-vue

完整引入

在 main.ts 中完整引入所有组件与样式：

import { createApp } from 'vue'
import App from './App.vue'

import '@tabler/core/dist/css/tabler.min.css'
import TablerVue from '@gulcc/tabler-vue'

const app = createApp(App)
app.use(TablerVue)
app.mount('#app')

按需引入

@gulcc/tabler-vue 支持按需引入，无需额外配置即可 Tree-shaking：

<script setup lang="ts">
import { TButton, TBadge, TCard } from '@gulcc/tabler-vue'
import { IconHeart } from '@tabler/icons-vue'
</script>

<template>
  <div class="d-flex gap-2 p-3">
    <TButton color="primary">
      <IconHeart class="me-1" /> 喜欢
    </TButton>
    <TBadge color="red">新功能</TBadge>
  </div>
</template>

避免命名冲突

本库所有组件均以 T 为前缀（如 TButton、TCard）。如果你的项目中已存在同名组件，可通过 按需引入 + 别名 解决冲突：

<script setup lang="ts">
import { TButton as TablerButton } from '@gulcc/tabler-vue'
import TButton from '@/components/TButton.vue'  // 你的本地组件
</script>

<template>
  <TablerButton color="primary">Tabler 按钮</TablerButton>
  <TButton>本地按钮</TButton>
</template>

完整引入（app.use(TablerVue)）方式不适用别名，如需避免冲突请采用按需引入。T 前缀不支持运行时批量替换。