Livewire 中文文档安装
Livewire是一个 标准的 Laravel 扩展包，因此在安装和使用 Livewire 之前，您需要先启动并运行一个 Laravel 应用程序。如果您安装新的 Laravel 框架需要帮助可以参阅 Laravel 官方文档。
要安装Livewire，请打开终端并切换到您的 Laravel 应用程序目录，然后运行以下命令：
composer require livewire/livewire就是这么简单。如果需要更多的自定义选项，请继续往下阅读。
发布配置文件
Livewire 是“零配置”的，这意味着您可以按照默认配置即可开始您的开发。当然也可以通过运行以下 Artisan 命令发布和自定义 Livewire 的配置：
php artisan livewire:publish --config这将在您的Laravel应用程序的 config 目录中创建一个新的 livewire.php 文件。
手动引入Livewire 的前端资源
默认情况下，Livewire 会自动将其所需的 JavaScript 和 CSS 资源注入到包含 Livewire 组件的每个页面中。
如果您想要进一步控制，可以在页面中使用以下 Blade 指令手动引入资源：
<html>
<head>
...
@livewireStyles
</head>
<body>
...
@livewireScripts
</body>
</html>由于 Alpine 与 Livewire 的 JavaScript 资源捆绑打包在一起，所以在使用了 Alpine 的每个页面上dou必须引入，即使您在该页面上没有使用Livewire。
可以通过更新应用程序的 config/livewire.php 文件中的 inject_assets 配置项来禁用 Livewire 的自动注入资源行为：
'inject_assets' => false,如果您希望强制 Livewire 在单个页面或多个页面上注入资源，您可以从当前路由或服务提供者中调用以下全局方法。
\Livewire\Livewire::forceAssetInjection();配置Livewire的更新路由
Livewire组件每次更新都会发送一个网络请求到以下路由: https://example.com/livewire/update
对于使用多语言或多租户的某些应用程序可能会有问题。
在这些情况下，您可以根据需要注册自己的路由，然后在 Livewire::setUpdateRoute() 中进行注册，Livewire 就会在更新组件时使用此路由：
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([...]); // [tl! highlight]
});自定义资源URL
默认情况下，Livewire将从以下URL提供其 JavaScript 资源：https://example.com/livewire/livewire.js：
<script src="/livewire/livewire.js"></script>如果您的应用程序由于多语言或多租户而具有全局路由前缀，可以在 Livewire::setScriptRoute() 中注册 Livewire 在获取 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.js 脚本标签, 使用ESM（ECMAScript模块）版本。在布局文件（resources/views/components/layouts/app.blade.php）中添加 @livewireScriptConfig 指令即可实现：
<html>
<head>
<!-- ... -->
@livewireStyles
@vite(['resources/js/app.js'])
</head>
<body>
{{ $slot }}
@livewireScriptConfig <!-- [tl! highlight] -->
</body>
</html>检测到 @livewireScriptConfig 指令时，Livewire 将不再注入 Livewire 和 Alpine 脚本。记得删除 @livewireScripts 指令并添加@livewireStyles 指令。
最后一步是在我们的 app.js 文件中导入 Alpine 和 Livewire，这种方式允许我们注册任何自定义资源，最后启动Livewire和Alpine：
import { Livewire, Alpine } from '../../vendor/livewire/livewire/dist/livewire.esm';
import Clipboard from '@ryangjchandler/alpine-clipboard'
Alpine.plugin(Clipboard)
Livewire.start()
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：