在 Vue 中使用

在 Vue 3 应用中接入 @reglow/reui

安装

npm install @reglow/reui

全局注册

在 main.ts 中注册全部组件：

import { createApp } from "vue";
import App from "./App.vue";
import ReglowReUI from "@reglow/reui";
import "@reglow/reui/style.css";

const app = createApp(App);
app.use(ReglowReUI);
app.mount("#app");

注册后所有组件均可直接在模板中使用：

<template>
  <Button>按钮</Button>
  <Input placeholder="请输入" />
</template>

按需引入

无需全局注册，直接在组件中导入：

<script setup lang="ts">
import { Button, Input } from "@reglow/reui";
import "@reglow/reui/style.css";
</script>

<template>
  <Button>按钮</Button>
  <Input placeholder="请输入" />
</template>

style.css 只需在应用入口引入一次。如果使用 Tailwind CSS 4，可将 @import "@reglow/reui/style.css" 加入主 CSS 文件，或配置 content 扫描路径包含 node_modules/@reglow/reui。

Tailwind CSS 配置

ReUI 基于 Tailwind CSS 4，需确保 tailwind.config 或 CSS @source 包含组件路径：

@import "tailwindcss";
@source "../node_modules/@reglow/reui/dist";

或使用组件库自带的 style.css（已包含全部所需工具类）：

@import "@reglow/reui/style.css";

ConfigProvider

在根组件包裹 ConfigProvider，统一配置语言和主题：

<script setup lang="ts">
import { ConfigProvider } from "@reglow/reui";
</script>

<template>
  <ConfigProvider :locale="'zh-CN'" :theme="{ mode: 'light', primaryColor: 'blue' }">
    <App />
  </ConfigProvider>
</template>

TypeScript

ReUI 提供完整的类型定义，无需额外配置：

import type { ButtonProps, ThemeConfig } from "@reglow/reui";
安装
在 Nuxt 中使用
通过 Nuxt module 自动注册全部组件