介绍
安装
Filament 需要满足以下条件：
- PHP 8.2+
- Laravel v11.28+
- Tailwind CSS v4.0+
安装有两种方式，取决于你想使用官方的面板构建器还是在你应用的 Blade 视图中使用其组件。
面板构建器
大部分开发者选择这个选项来构建一个面板（如：管理面板）。此面构建器将所有组件组合成一个整体框架。你可以在 Laravel 安装中创建任意数量的面板，而只需安装它一次。
作为独立组件
如果你使用 Blade 重头开始创建你的应用，你可以安装 Filament 的独立组件来扩展你的 UI。
安装面板构建器
由于 Filament v4 仍然处于 Beta 阶段，你需要在安装前将 composer.json 文件中的 minimum-stability 设置为 beta。可以手动修改此文件，或者使用 CLI：
composer config minimum-stability beta
composer.json 文件如下：
{
"minimum-stability": "beta"
}
在 Laravel 项目目录中运行如下命令安装 Filament 面板构建器:
composer require filament/filament:"^4.0"
php artisan filament:install --panels
NOTE
如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：
composer require filament/filament:"~4.0"
php artisan filament:install --panels
这将会新建并注册一个新的 Laravel 服务提供者 - app/Providers/Filament/AdminPanelProvider.php。
TIP
如果你在访问面板时出现错误，请检查该服务提供者是否已注册在 bootstrap/providers.php 文件中。如果没有注册，你需要手动添加它。
你可以使用如下命令创建一个新的用户账号：
php artisan make:filament-user
在浏览器中打开 /admin，登录，并开始构建你的应用!
安装独立组件
由于 Filament v4 仍然处于 Beta 阶段，你需要在安装前将 composer.json 文件中的 minimum-stability 设置为 beta。可以手动修改此文件，或者使用 CLI
composer config minimum-stability beta
composer.json 如下：
{
"minimum-stability": "beta"
}
使用 Composer 安装你想要使用的 Filament 组件
composer require
filament/tables:"^4.0"
filament/schemas:"^4.0"
filament/forms:"^4.0"
filament/infolists:"^4.0"
filament/actions:"^4.0"
filament/notifications:"^4.0"
filament/widgets:"^4.0"
你可以稍后在项目中安装其他 Filament 组件时，不需要重复这些安装步骤。
NOTE
如果使用 Windows PowerShell 安装 Filament，你需要运行如下命令，因为它会忽视版本约束的 ^ 字符：
composer require
filament/tables:"~4.0"
filament/schemas:"~4.0"
filament/forms:"~4.0"
filament/infolists:"~4.0"
filament/actions:"~4.0"
filament/notifications:"~4.0"
filament/widgets:"~4.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/components/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 通知给用户时才需要。
Still need help? Join our Discord community or open a GitHub discussion