安装 - Widgets - Filament

在面板中使用 Widget？那你可以跳过此安装。本教程适合于在自定义 TALL 栈应用中使用该包的开发者。

要求

运行 Filament 有一些基础要求：

PHP 8.1+
Laravel v10.0+
Livewire v3.0+

安装

首先，使用 Composer 导入此包：

composer require filament/widgets:"^3.2" -W
composer require filament/widgets:"^3.2" -W

全新 Laravel 项目

要在新 Laravel 项目中快速开始使用 Filament，运行如下命令安装 Livewire、Alpine.js 和 Tailwind CSS：

php artisan filament:install --scaffold --widgets
 
npm install
 
npm run dev
php artisan filament:install --scaffold --widgets

npm install

npm run dev

由于这些命令会覆盖你应用中现有的文件，因此我们只推荐在新的 Laravel 项目中运行这些命令！

已有的 Laravel 项目

首先，运行以下命令安装该包的资源：

php artisan filament:install --widgets
php artisan filament:install --widgets

安装 Tailwind CSS

首先，使用 npm 安装 Tailwind CSS 及它的 forms 和 typography 插件：

npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev
npm install tailwindcss @tailwindcss/forms @tailwindcss/typography postcss postcss-nesting autoprefixer --save-dev

新建一个 tailwind.config.js 文件。确保添加了 Filament 的 preset，它配置了颜色和安装的插件：

import preset from './vendor/filament/support/tailwind.config.preset'
 
export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}
import preset from './vendor/filament/support/tailwind.config.preset'

export default {
    presets: [preset],
    content: [
        './app/Filament/**/*.php',
        './resources/views/filament/**/*.blade.php',
        './vendor/filament/**/*.blade.php',
    ],
}

配置样式

在 resources/css/app.css 中，引入 Tailwind CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind base;
@tailwind components;
@tailwind utilities;

在应用根目录中创建一个 postcss.config.js 文件，并将 Tailwind CSS、 PostCSS Nesting 和 Autoprefixer 注册成插件：

export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}
export default {
    plugins: {
        'tailwindcss/nesting': 'postcss-nesting',
        tailwindcss: {},
        autoprefixer: {},
    },
}

自动刷新浏览器

你可能也想更新 vite.config.js 文件，以在 Livewire 组件更新后自动刷新页面:

import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'
 
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})
import { defineConfig } from 'vite'
import laravel, { refreshPaths } from 'laravel-vite-plugin'

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: [
                ...refreshPaths,
                'app/Livewire/**',
            ],
        }),
    ],
})

编译资源

使用 npm run dev 编译新的 CSS 和 JS 资源。

配置布局

最后，为 Livewire 组件创建一个新的 resources/views/components/layouts/app.blade.php 布局文件：

<!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 }}
 
        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>
<!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 }}

        @filamentScripts
        @vite('resources/js/app.js')
    </body>
</html>

发布配置

你可以发布此包的配置，使用如下命令：

php artisan vendor:publish --tag=filament-config
php artisan vendor:publish --tag=filament-config

升级

当运行 composer update 命令时，Filament 会自动升级到最新的非破坏性版本。升级完成后，应该清除所有 Laravel 缓存，并且重新发布前端资源。你可以使用 filament:upgrade 命令一次性完成这些动作，该命令会第一次运行 filament:install 添加到 composer.json 文件中：

"post-autoload-dump": [
    // ...
    "@php artisan filament:upgrade"
],
"post-autoload-dump": [
    // ...
    "@php artisan filament:upgrade"
],

请注意 filament:upgrade 不会真正处理升级过程，因为 Composer 已经做了升级，如果你不使用 post-autoload-dump 钩子手动升级，你可以自己运行该命令：

composer update
 
php artisan filament:upgrade
composer update

php artisan filament:upgrade

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

#要求

#安装

#全新 Laravel 项目

#已有的 Laravel 项目

#安装 Tailwind CSS

#配置样式

#自动刷新浏览器

#编译资源

#配置布局

#发布配置

#升级

要求

安装