Livewire 中文文档API 参考
安装
Livewire 是一个标准的 Laravel 扩展包，因此在安装和使用 Livewire 之前，您需要先运行一个 Laravel 应用程序。如果您需要帮助创建一个新的 Laravel 应用程序，请参阅官方的Laravel文档。
要安装Livewire，请打开您的终端并切换到您的 Laravel 应用程序根目录，然后运行以下命令：
composer require livewire/livewire就是这么简单，如果您想要更多的自定义选项可以继续阅读。否则，您就可以立即开始使用 Livewire 愉快的开发了。
发布配置文件
Livewire 是支持 “零配置” 的，这意味着您无需任何修改，按照默认配置即可正常使用。当然，如果需要自定义配置的话夜可以运行以下Artisan 命令来发布配置文件以自定义 Livewire 配置：
php artisan livewire:publish --config这将在您的 Laravel 应用程序的 config 目录中创建一个新的 livewire.php 文件。
手动引入前端资源
默认情况下，Livewire 会自动将其所需的 JavaScript 和 CSS 资源注入到包含 Livewire 组件的每个页面中。
如果您想对这种行为进行更多控制，可以使用以下Blade指令在页面上手动引入这些资源：
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>通过在页面上手动引入这些资源，可以实现精细地控制资源的加载方式。
由于 Alpine 与 Livewire 的 JavaScript 捆绑在一起，您必须在希望使用 Alpine 的每个页面上引入它，即使您在该页面上没有使用 Livewire。
您可以通过更新应用程序的 config/livewire.php 文件中的 inject_assets 配置项来禁用 Livewire 的自动注入资产行为, 不过很少需要您这样做：
'inject_assets' => false,如果您希望强制将 Livewire 资源注入单个或多个页面，您可以从当前路由或服务提供者中调用以下全局方法：
\Livewire\Livewire::forceAssetInjection();配置 Livewire 的更新路由
对于使用多语言本地化或多租户的应用程序，Livewire 组件的每次更新都会向以下路由发送网络请求：https://example.com/livewire/update。在这种情况下，您可以按自己的喜好注册路由，只要在 Livewire::setUpdateRoute() 像如下代码注册即可：
Livewire::setUpdateRoute(function ($handle) {
return Route::post('/custom/livewire/update', $handle);
});现在，Livewire 会将组件更新请求发送到 /custom/livewire/update。由于Livewire允许您注册自己的更新路由，您可以直接在setUpdateRoute() 内声明 Livewire 要使用的任何额外的中间件：
Livewire::setUpdateRoute(function ($handle) {
return Route::post('/custom/livewire/update', $handle)
->middleware([...]);
});自定义静态文件引入路径
默认情况下，Livewire 将从以下 URL 引入其 JavaScript 资源：https://example.com/livewire/livewire.js:
<script src="/livewire/livewire.js"></script>如果您的应用程序因多语言本地化或多租户而具有全局路由前缀，您可以注册自己的路由，Livewire 内部会使用其获取 JavaScript。在 Livewire::setScriptRoute() 注册即可使用自定义的 JavaScript 资源路由：
Livewire::setScriptRoute(function ($handle) {
return Route::get('/custom/livewire/livewire.js', $handle);
});现在，Livewire 将会以如下方式加载其 JavaScript 资源：
<script src="/custom/livewire/livewire.js"></script>手动打包 Livewire 和 Alpine
默认情况下，Alpine 和 Livewire 是使用 <script src="livewire.js"> 标签加载的，这意味着您无法控制这些库的加载顺序。因此，像下面示例中显示的导入和注册 Alpine 插件的方式将不再起作用：
// 注意！！！注意！！！注意！！！这段代码是反例，请不要照抄......
import Alpine from 'alpinejs'
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard)
Alpine.start()要解决这个问题，我们需要告诉 Livewire 使用另外的 ESM（ECMAScript模块）版本，并阻止自动注入 livewire.js 脚本标签。为了实现这一点，我们必须在布局文件中（resources/views/components/layouts/app.blade.php）中添加 @livewireScriptConfig 指令：
<html>
<head>
<!-- ... -->
@livewireStyles
@vite(['resources/js/app.js'])
</head>
<body>
{{ $slot }}
@livewireScriptConfig
</body>
</html>当 Livewire 检测到 @livewireScriptConfig 指令时，它将不会自动注入 Livewire 和 Alpine 脚本。如果您正在使用 @livewireScripts 指令手动加载 Livewire，请确保将其删除。然后添加 @livewireStyles指令。
最后一步是在 app.js 文件中导入 Alpine 和 Livewire，这里允许注册任何自定义资源:
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard';
Alpine.plugin(Clipboard);
Livewire.start();
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：