显示侧边栏
隐藏侧边栏
安装
Flux 是为你的 Livewire 应用精心打造的强大 UI 组件库。它基于 Tailwind CSS 构建，提供一套易于使用与自定义的组件。
要开始一个新项目？Flux 已内置于全新的 Livewire 入门套件 ->
先决条件
安装前，请确保已满足以下要求：
快速开始
1
安装 Flux
在项目根目录通过 Composer 安装 Flux：
composer require livewire/flux2
安装 Flux Pro（可选）
如果你已购买 Flux Pro 许可，可使用以下命令进行安装：
php artisan flux:activate在激活过程中，系统会提示你输入邮箱和许可证密钥。
如果你尚未购买 Flux Pro 许可，你可以在此购买 ->。
上述命令将在你的项目根目录创建一个 auth.json 文件。该文件包含用于下载和安装 Flux 的邮箱与许可证密钥，且不应提交到版本控制。
你也可以在此查看你的 许可证及对应的安装说明 ->
3
引入 Flux 资源
现在，将 @fluxAppearance 与 @fluxScripts Blade 指令加入你的布局文件：
<head> ... @fluxAppearance</head><body> ... @fluxScripts</body>4
设置 Tailwind CSS
最后一步是设置 Tailwind CSS。Flux 使用 Tailwind CSS 作为默认样式系统。
Flux v2.0 需要 Tailwind CSS v4.0 或更高版本。
如果你的项目已安装 Tailwind，只需在 resources/css/app.css 中添加以下配置：
@import 'tailwindcss';@import '../../vendor/livewire/flux/dist/flux.css';@custom-variant dark (&:where(.dark, .dark *));如果尚未安装 Tailwind，可在 Tailwind 官网了解安装方法。
5
使用 Inter 字体族
虽然完全可选，但我们建议在你的应用中使用 Inter 字体族。
在布局文件的 head 标签中加入以下内容以确保字体被加载：
<head> ... <link rel="preconnect" href="https://fonts.bunny.net"> <link href="https://fonts.bunny.net/css?family=inter:400,500,600&display=swap" rel="stylesheet" /></head>你可以在 resources/css/app.css 中配置 Tailwind 使用该字体族：
@import 'tailwindcss';@import '../../vendor/livewire/flux/dist/flux.css';...@theme { --font-sans: Inter, sans-serif;}主题
我们对 Flux 进行了精心设计，开箱即用就很好看；但每个项目都有自己的风格。你可以选择我们精挑细选的配色方案，或通过自定义 CSS 变量构建你自己的主题。
禁用深色模式
默认情况下，Flux 会根据用户的系统偏好或所选外观，为 html 元素添加 dark 类来管理你的应用外观。
如果你不希望由 Flux 来处理，你可以从布局文件中移除 @fluxAppearance 指令。
<head> ...-- &fluxAppearance</head>现在你可以手动管理应用的外观了。
发布组件
为保持简单，你可以直接在 Blade 文件中使用 Flux 的内部组件。但如果你想自定义某个 Flux 组件，可以使用以下 Artisan 命令将其 Blade 模板发布到你的项目中：
php artisan flux:publish系统会提示你搜索并选择要发布的组件。若要一次性发布全部组件，可使用 --all 标志。
保持 Flux 为最新
为确保使用 Flux 的最新版本，请定期更新你的 Composer 依赖：
composer update livewire/flux livewire/flux-pro如果你发布过 Flux 组件，在更新前请务必查看变更日志以了解可能的不兼容变更：
克隆现有项目
如果你要克隆一个已使用 Flux Pro 的现有项目，你需要对 Flux Pro 的安装进行身份验证。
运行 composer install 时，系统会提示你输入用户名和密码：
- 将你的 Flux 账户邮箱作为用户名输入
- 将你的 Flux 许可证密钥作为密码输入
为避免手动输入这些凭据，你可以创建一个 Composer 的 auth.json 文件。
为此，请在运行 composer install 之前先执行如下命令：
composer config http-basic.composer.fluxui.dev your-email your-license-key
请务必将 `your-email` 和 `your-license-key` 替换为你真实的 Flux 账户邮箱与许可证密钥，你可以在 控制台 -> 中找到它们。
这将在你的项目根目录创建一个 auth.json 文件。该文件包含用于下载和安装 Flux Pro 的邮箱与许可证密钥，且不应提交到版本控制。
现在你可以运行 composer install，系统将自动完成 Flux Pro 的身份验证。
使用 Laravel Forge 激活
如果你使用 Laravel Forge，可以利用其内置的 Packages 功能来为私有的 Composer 包进行认证。
Laravel Forge 允许你在服务器或站点级别管理软件包。如果你有多个站点使用 Flux，建议在服务器级别统一管理 Packages。
要认证 Flux，请前往服务器或站点的 Packages 页面，你将看到如下界面：
点击 “Add Credential” 按钮以为新的私有 Composer 包进行认证，并填写以下信息：
- 将 composer.fluxui.dev 填写为仓库 URL
- 将你的 Flux 账户邮箱作为用户名输入
- 将你的 Flux 许可证密钥作为密码输入
最后，点击 “Save” 按钮。现在你应该已经通过 Flux 的私有 Composer 服务器完成了认证，可使用 composer require livewire/flux-pro 安装 Flux。
更多信息请参考 Laravel Forge Packages 文档。
使用 Laravel Cloud 激活
如果你使用 Laravel Cloud，你需要使用其 Build Commands 功能为私有 Composer 包完成认证。
要认证 Flux，打开你要使用 Flux 的环境，进入 “Settings” 然后 “Deployments”。
在那里你会看到 “Build Commands” 部分。将以下命令添加在现有的 composer install 命令之前：
composer config http-basic.composer.fluxui.dev your-email your-license-key
请务必将 `your-email` 和 `your-license-key` 替换为你真实的 Flux 账户邮箱与许可证密钥，你可以在 控制台 -> 中找到它们。
最后，点击 “Save” 按钮。现在你应该已经通过 Flux 的私有 Composer 服务器完成了认证，并可部署你的应用。
更多信息请参考 Laravel Cloud 私有 Composer 包文档。
在 GitHub Actions 中激活
如果你在 GitHub Actions 中使用 Flux，需要将 Flux 的许可证信息添加到仓库的 Secrets，并相应配置工作流。
要将 Flux 许可证信息添加为仓库 Secrets，请先打开 GitHub 上的仓库，然后前往 Settings > Secrets and variables > Actions。
在此处点击 “New repository secret”：
你需要添加以下 Secrets：
- FLUX_USERNAME – 你的 Flux 账户邮箱
- FLUX_LICENSE_KEY – 你的 Flux 许可证密钥
添加完这些 Secrets 后，如果你使用的是 Laravel 的 Livewire 入门套件，其他配置通常已为你准备就绪。
如果你没有使用 Livewire 入门套件，需要在 GitHub Actions 工作流中添加如下配置：
- name: Add Flux license run: composer config http-basic.composer.fluxui.dev "${{ secrets.FLUX_USERNAME }}" "${{ secrets.FLUX_LICENSE_KEY }}"此步骤应放在执行 composer install 之前。
想查看实际示例，可参考 Livewire 入门套件的 GitHub Actions 工作流 ->。
现在你可以重新运行 GitHub Actions 工作流，它应能成功完成 Flux Pro 的安装认证。
在 CI 中激活
如果你在没有 auth.json 文件的 CI 环境中使用 Flux，可以在 CI 脚本中添加如下环境变量与命令：
composer config http-basic.composer.fluxui.dev "${FLUX_USERNAME}" "${FLUX_LICENSE_KEY}"配置 nginx
如果加载 Flux 的 JavaScript 与 CSS 资源出现问题，你可能需要在 nginx 服务器中进行相应配置。
默认情况下，Flux 会在你的应用中暴露两个用于提供其资源的路由：/flux/flux.js 与 /flux/flux.css。
这对大多数应用来说没有问题；但如果你使用了自定义配置的 nginx，可能会从上述端点收到 404。
为解决该问题，可在 nginx 配置中添加如下内容：
location ~ ^/flux/flux(\.min)?\.(js|css)$ { expires off; try_files $uri $uri/ /index.php?$query_string;}