Livewire 3 教程

livewire 3 教程- 001-在 Laravel 项目中安装 Livewire

第一步：初始化 Laravel 项目

首先，我们需要启动一个全新的 Laravel 项目。在终端中运行 laravel new livewire_app 命令以创建一个名为“livewire_app”的新项目。随后，使用 cd livewire_app 命令进入该项目目录。

并使用 git 进行代码追踪, 执行 git init 初始化 git 仓库

laravel new livewire_app
cd livewire_app

# 初始化一个新的 Git 仓库，在当前目录生成 .git 目录
git init

# 将当前目录下的所有文件添加到 Git 的暂存区
git add .

# 提交暂存区的所有文件到本地仓库，并附带提交信息
# -a 选项表示同时将已追踪的文件变更也提交
# -m 用于指定提交信息（注释）
git commit -am 'init(): init project'

第二步：打开代码编辑器

在代码编辑器中打开这个项目。找到 routes/web.php 文件，这是每个 Laravel 项目的起点。

php<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});

第三步：编辑欢迎页面

接下来，我们打开 resources/views/welcome.blade.php 文件，这是我们在浏览器中看到的页面。将其内容替换为以下内容：

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire App</title>
</head>
<body>
    <h1>Hello Internet</h1>
</body>
</html>
html

刷新浏览器，应该可以看到欢迎页面已经更新了

第四步：安装 Livewire

现在，我们需要安装 Livewire。在终端中运行以下命令：

composer require livewire/livewire

第五步：创建 Livewire 组件

安装完成后，我们将创建一个名为 “Hello World” 的 Livewire 组件。在终端中运行以下命令：

php artisan make:livewire HelloWorld

这会生成两个文件：

app/Http/Livewire/HelloWorld.php
resources/views/livewire/hello-world.blade.php

第六步：编辑 Livewire 组件

打开 HelloWorld.php 文件，内容如下：

php<?php

namespace App\Http\Livewire;

use Livewire\Component;

class HelloWorld extends Component
{
    public function render()
    {
        return view('livewire.hello-world');
    }
}
php

然后，打开 hello-world.blade.php 文件，将其内容替换为：

<div>
    Hello Internet
</div>

第七步：在欢迎页面中包含 Livewire 组件

回到 welcome.blade.php 文件，添加 Livewire 的渲染代码：

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Livewire Basics</title>

</head>
<body>
    <h1>Hello Internet</h1>

    <livewire:hello-world />


</body>
</html>
html

刷新浏览器，你应该看到页面更新了，一个是静态的，一个是通过 Livewire 渲染的。

第八步：添加交互性

现在，让我们为组件添加一些交互性。编辑 hello-world.blade.php 文件，添加一个按钮和一个显示当前时间的文本：

<div>
    <p>The current time is {{ now() }}</p>
    <button wire:click="$refresh">Refresh</button>
</div>

wire:click="$refresh"：这是 Livewire 的指令，表示在点击按钮时，调用 $refresh 事件。这个事件用于刷新组件并重新加载当前的视图。
刷新浏览器，点击按钮，时间会实时更新，而无需刷新整个页面。

结论：

通过以上步骤，我们成功地在 Laravel 项目中安装并配置了 Livewire，并创建了一个简单的交互式组件。这只是 Livewire 的冰山一角，后续视频中我们将深入探讨更多功能和细节。

希望这个教程对你有帮助！如果有任何问题，请随时提问。Happy Coding!

livewire 3 教程- 001-在 Laravel 项目中安装 Livewire

Table of contents

livewire 3 教程- 001-在 Laravel 项目中安装 Livewire

Subscribe to my newsletter

Ross Li

Ross Li