安装

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

前置要求

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

1. 安装依赖包

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

pnpm

pnpm add @breezeui/vue

npm

npm install @breezeui/vue

yarn

yarn add @breezeui/vue

bun

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：

pnpm

pnpm add -D unplugin-vue-components

npm

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