安装
要求
运行Filament有一些特定的要求:
- PHP 8.0+
- Laravel v8.0+
- Livewire v2.0+
表单构造器已经在后台面板 2.x中预装了,不过如果你要在其他项目中使用,还是需要按照以下安装指示操作。
新的 Laravel 项目
要快速使用表单构造器,你可以用这些命令安装 Alpine.js、TailwindCSS 和 Livewire:
composer require filament/forms:"^2.0"php artisan forms:installnpm installnpm run dev
这些命令会粗暴地重写覆盖你现有的文件,所以我们只推荐在新项目中使用这种方法。
现在可以开始构建表单了!
已有Laravel项目
这个包使用了以下依赖:
你可以使用 NPM 安装:
npm install alpinejs postcss tailwindcss @tailwindcss/forms @tailwindcss/typography --save-dev
配置 Tailwind CSS
要完成Tailwind安装,你必须在项目的根目录中创建 tailwind.config.js
文件。最简单的做法是运行 npx tailwindcss init
命令。
在 tailwind.config.js
中,注册你安装好的插件,然后添加表格构造器要使用的自定义颜色:
import colors from 'tailwindcss/colors' import forms from '@tailwindcss/forms'import typography from '@tailwindcss/typography' export default { content: [ './resources/**/*.blade.php', './vendor/filament/**/*.blade.php', ], theme: { extend: { colors: { danger: colors.rose, primary: colors.blue, success: colors.green, warning: colors.yellow, }, }, }, plugins: [ forms, typography, ],}
当然,你也可以指定你自己定义的 primary
和 danger
颜色,这会替换掉原有的颜色。
打包资源
新的 Laravel 项目默认使用 Vite 打包资源。不过,你仍然可以使用 Laravel Mix。
Vite
如果你使用 Vite, 你应该通过NPM手动安装 Autoprefixer:
npm install autoprefixer --save-dev
在项目的根目录中新建 postcss.config.js
文件,以插件形式注册 Tailwind CSS 和 Autoprefixer:
export default { plugins: { 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/Http/Livewire/**', 'app/Forms/Components/**', ], }), ],})
Laravel Mix
在 webpack.mix.js
文件中,以 PostCSS 插件的形式注册 Tailwind CSS:
const mix = require('laravel-mix') mix.js('resources/js/app.js', 'public/js') .postCss('resources/css/app.css', 'public/css', [ require('tailwindcss'), ])
配置样式
在 /resources/css/app.css
文件中,引入 filament/forms
vendor CSS 和 TailwindCSS:
@import '../../vendor/filament/forms/dist/module.esm.css'; @tailwind base;@tailwind components;@tailwind utilities;
配置脚本
在 /resources/js/app.js
文件中,引入 Alpine.js、filament/forms
插件并注册:
import Alpine from 'alpinejs'import FormsAlpinePlugin from '../../vendor/filament/forms/dist/module.esm'import NotificationsAlpinePlugin from '../../vendor/filament/notifications/dist/module.esm' Alpine.plugin(FormsAlpinePlugin)Alpine.plugin(NotificationsAlpinePlugin) window.Alpine = Alpine Alpine.start()
编译资源
使用 npm run dev
编译新的 CSS 和 JS 资源:
布局配置
最后,为 Livewire 组件新建 resources/views/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> <!-- Styles --> <style>[x-cloak] { display: none !important; }</style> @livewireStyles <link rel="stylesheet" href="{{ mix('css/app.css') }}"> <!-- Scripts --> @livewireScripts <script src="{{ mix('js/app.js') }}" defer></script> @stack('scripts') </head> <body class="antialiased"> {{ $slot }} @livewire('notifications') </body></html>
现在可以开始 构建表单 了!
发布配置文件
有需要时,你可以使用这个命令发布配置文件:
php artisan vendor:publish --tag=forms-config
发布翻译文件
如果你需要翻译这个扩展包,你可以使用这个命令发布语言文件:
php artisan vendor:publish --tag=forms-translations
由于本包也依赖于其他 Filament 包,你可以可以发布这些语言文件:
php artisan vendor:publish --tag=filament-support-translations
升级
要将该软件包升级到最新版本,你必须运行:
composer updatephp artisan filament:upgrade
我们推荐将 filament:upgrade
添加到 composer.json
文件的 post-update-cmd
中,使之自动运行:
"post-update-cmd": [ // ... "@php artisan filament:upgrade"],