安装

未匹配的标注
本文档最新版为 2.x,旧版本可能放弃维护,推荐阅读最新版!

安装

安装扩展包

composer require livewire/livewire

引入静态文件

在您的模板的 head 标签中和 body 标签末尾添加以下 Blade 指令。

<html>
<head>
    ...
    @livewireStyles
</head>
<body>
    ...
    @livewireScripts
</body>
</html>

如果您使用的是 Laravel 7 或更高版本,则可以使用新的语法。

<livewire:styles>
...
<livewire:scripts>

仅此而已! 这就是开始使用 Livewire 所需的全部。 此页面上的其他所有内容都是可选的。

发布配置文件

Livewire的目标是“零配置”开箱即用的,但是某些用户需要更多的配置选项。

您可以使用以下 artisan 命令发布 Livewire 的配置文件:

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

配置静态资源的基础 URL

By default, Livewire serves its JavaScript portion (livewire.js) from the following route in your app:

实际生成的 script 标签默认是这样的:<script src="/livewire/livewire.js".

有两种情况可以更改此默认行为:

  1. 您发布了Livewire 静态资源,可以通过 “assets” 之类的子文件夹为它们提供服务。

  2. 您的应用托管在域名的非根路径上。 例如:https://your-laravel-app.com/application, 在这种情况下,实际静态资源将通过/application/livewire/livewire.js 提供,但是生成的脚本标签将尝试从 /livewire/livewire.js获取。

要解决这两个问题,您可以配置 asset_base_url 设置来自定义 src ="" 属性的前缀。

例如,发布Livewire的配置文件后,以下设置将解决以上两个问题:
1. 'asset_base_url'=>'/assets'
2. 'asset_base_url'=>'/application'

发布静态资源

如果您希望通过Web服务器而不是通过 Laravel 提供 JavaScript 资源,请使用 vendor:publish 命令:

php artisan vendor:publish --tag=livewire:assets

为了使静态资源保持最新状态并避免将来的更新出现问题,我们 强烈建议 在您的 composer.json 文件中的 post-autoload-dump 脚本中添加以下命令:

{
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi",
            "@php artisan vendor:publish --force --tag=livewire:assets --ansi"
        ]
    }
}

本文章首发在 LearnKu.com 网站上。

上一篇 下一篇
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 0
发起讨论 查看所有版本


暂无话题~