BreezeUI
  • 简体中文

    • 安装

    本指南将帮助你在 Vue 3 项目中安装并配置 BreezeUI。

    前置要求

    • Node.js 18+
    • Vue 3.3+
    • Tailwind CSS 3+

    1. 安装依赖包

    使用你偏好的包管理器安装 @breezeui/vue：

    ::: code-group

    pnpm add @breezeui/vue
    npm install @breezeui/vue
    yarn add @breezeui/vue
    bun add @breezeui/vue

    :::

    2. 配置 Tailwind CSS

    在 tailwind.config.js（或 tailwind.config.ts）中加入 BreezeUI 的扫描路径与动画插件：

    /** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './index.html',
    './src/**/*.{vue,js,ts,jsx,tsx}',
    './node_modules/@breezeui/vue/dist/**/*.{js,ts,vue}',
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('tailwindcss-animate'),
  ],
}

    如果你启用了 tailwindcss-animate，请在项目中安装该插件：

    pnpm add -D tailwindcss-animate

    3. 引入基础样式

    在入口文件（如 main.ts 或 main.js）中引入 BreezeUI 基础样式：

    import '@breezeui/vue/dist/index.css'

    4. 使用组件

    支持两种方式：自动按需导入（推荐）与手动导入。

    自动按需导入（推荐）

    安装 unplugin-vue-components：

    ::: code-group

    pnpm add -D unplugin-vue-components
    npm install -D unplugin-vue-components

    :::

    在 vite.config.ts 中配置 BreezeUI resolver：

    import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { BreezeUIResolver } from '@breezeui/vue'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      resolvers: [
        BreezeUIResolver({ importStyle: true }),
      ],
    }),
  ],
})

    配置后即可在模板中直接使用组件：

    <template>
  <BrButton>点击</BrButton>
</template>

    手动导入

    <script setup lang="ts">
import { BrButton } from '@breezeui/vue'
</script>

<template>
  <BrButton>点击</BrButton>
</template>

    全局注册（可选）

    import { createApp } from 'vue'
import App from './App.vue'
import BreezeUI from '@breezeui/vue'
import '@breezeui/vue/dist/index.css'

createApp(App).use(BreezeUI).mount('#app')

    与示例相关的额外依赖

    文档中的部分示例会使用 @vueuse/core（深色模式切换）与 lucide-vue-next（图标）。如果你需要在自己的业务代码中直接 import 它们，建议在项目中显式安装：

    pnpm add @vueuse/core lucide-vue-next