介绍
Installation
Filament 需要满足以下条件：
- PHP 8.2+
- Laravel v11.28+
- Tailwind CSS v4.1+
安装有两种方式，取决于你想使用官方的面板构建器还是在你应用的 Blade 视图中使用其组件。
面板构建器
大部分开发者选择这个选项来构建一个面板（如：管理面板）。此面构建器将所有组件组合成一个整体框架。你可以在 Laravel 安装中创建任意数量的面板，而只需安装它一次。
独立组件
如果你使用 Blade 重头开始创建你的应用，你可以安装 Filament 的独立组件来扩展你的 UI。
安装面板构建器
在 Laravel 项目目录中运行如下命令安装 Filament 面板构建器:
composer require filament/filament:"^5.0"
php artisan filament:install --panels
NOTE
如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：
composer require filament/filament:"~5.0"
php artisan filament:install --panels
这将会新建并注册一个新的 Laravel 服务提供者 - app/Providers/Filament/AdminPanelProvider.php。
TIP
如果你在访问面板时出现错误，请检查该服务提供者是否已注册在 bootstrap/providers.php 文件中。如果没有注册，你需要手动添加它。
你可以使用如下命令创建一个新的用户账号：
php artisan make:filament-user
在浏览器中打开 /admin，登录，并开始构建你的应用!
安装独立组件
使用 Composer 安装你想要使用的 Filament 组件：
composer require
filament/tables:"^5.0"
filament/schemas:"^5.0"
filament/forms:"^5.0"
filament/infolists:"^5.0"
filament/actions:"^5.0"
filament/notifications:"^5.0"
filament/widgets:"^5.0"
你可以稍后在项目中安装其他 Filament 组件时，不需要重复这些安装步骤。
NOTE
如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：
composer require
filament/tables:"~5.0"
filament/schemas:"~5.0"
filament/forms:"~5.0"
filament/infolists:"~5.0"
filament/actions:"~5.0"
filament/notifications:"~5.0"
filament/widgets:"~5.0"
如果你只想要使用 Blade UI 组件套件，你需要在此阶段安装 filament/support。
新的 Laravel 项目
运行简单命令就能快速开始使用 Filament 组件。注意，此操作将覆盖你的 app 中的任何已修改文件，因此它仅适用于新的 Laravel 项目。
现有的 Laravel 项目
如果你要在现有的 Laravel 项目中安装 Filament，请不要使用此命令。相反，你需要手动安装以保留已有的功能。
要在新的 Laravel 项目中安装 Filament，请运行如下命令来安装 Livewire、Alpine.js 和 Tailwind CSS：
NOTE
这些命令将会在你的项目中覆盖已存在的文件。请不要在已有的项目中运行此命令！
运行如下命令安装 Filament 前端资源：
php artisan filament:install --scaffold
npm install
npm run dev
在搭建框架时，如果你已经安装 Notifications 包，Filament 会问你是否想安装所需的 Livewire 组件到你的默认布局文件中。如果你希望通过 Filament 给用户发送闪屏消息，就需要这个组件。
运行如下命令安装 Filament 前端资源：
php artisan filament:install
安装 Tailwind CSS
如果你未安装如下这些组件，请运行如下命令安装 Tailwind CSS 和其 Vite 插件：
npm install tailwindcss @tailwindcss/vite --save-dev
配置样式
要配置 Filament 的样式，你需要导入 Filament 包的 CSS 文件，通常在 resources/css/app.css 中。
屈居于你安装的是哪些包，你可以只导入必要的 CSS 文件，以保持你应用的 CSS bunlde size 较小。
@import 'tailwindcss';
/* Required by all components */
@import '../../vendor/filament/support/resources/css/index.css';
/* Required by actions and tables */
@import '../../vendor/filament/actions/resources/css/index.css';
/* Required by actions, forms and tables */
@import '../../vendor/filament/forms/resources/css/index.css';
/* Required by actions and infolists */
@import '../../vendor/filament/infolists/resources/css/index.css';
/* Required by notifications */
@import '../../vendor/filament/notifications/resources/css/index.css';
/* Required by actions, infolists, forms, schemas and tables */
@import '../../vendor/filament/schemas/resources/css/index.css';
/* Required by tables */
@import '../../vendor/filament/tables/resources/css/index.css';
/* Required by widgets */
@import '../../vendor/filament/widgets/resources/css/index.css';
@variant dark (&:where(.dark, .dark *));
配置 Vite 插件
如果还没有安装该插件，请将 @tailwindcss/vite 插件添加到你的 Vite 配置中 (vite.config.js)：
import { defineConfig } from 'vite'
import laravel from 'laravel-vite-plugin'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
plugins: [
laravel({
input: ['resources/css/app.css', 'resources/js/app.js'],
refresh: true,
}),
tailwindcss(),
],
})
编译资源
使用 npm run dev 编译新的 CSS 和 JavaScript 资源：
配置你的布局
如果你还没有 Blade 布局文件，请运行以下命令在 resources/views/layouts/app.blade.php 中创建它：
php artisan livewire:layout
添加如下代码到新的布局文件中：
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="application-name" content="{{ config('app.name') }}">
<meta name="csrf-token" content="{{ csrf_token() }}">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }}</title>
<style>
[x-cloak] {
display: none !important;
}
</style>
@filamentStyles
@vite('resources/css/app.css')
</head>
<body class="antialiased">
{{ $slot }}
@livewire('notifications') {{-- Only required if you wish to send flash notifications --}}
@filamentScripts
@vite('resources/js/app.js')
</body>
</html>
其中重要的部分是布局的 <head> 中的 @filamentStyles 和 <body> 结尾处中的 @filamentScripts。请务必引入 Vite 编译后的 CSS 和 JavaScript 文件！
NOTE
@livewire('notifications') 这一行只有在你安装了 Notifications 包并且想通过 Filament 发送 Flash 通知给用户时才需要。
Publishing configuration
Filament ships with a configuration file that allows you to override defaults shared across all packages. Publish it after installing the panel builder so you can review and customize the settings:
php artisan vendor:publish --tag=filament-config
This command creates config/filament.php, where you can configure options like the default filesystem disk, file generation flags, and UI defaults. Re-run the publish command any time you want to pull in newly added configuration keys before tweaking them to suit your project.
Still need help? Join our Discord community or open a GitHub discussion