1、 Livewire 的安装与初体验

作者: 温新

图书: 【Livewire v3 神兵利器 - 马步篇】

阅读: 399

时间: 2024-07-26 02:10:50

hi，我是温新，一名 PHPer

环境说明

系统： Deepin 系统。

Livewire 版本：Livewire v3

安装 Livewire

什么是 Liveware

Livewire 是 Laravel 的全栈框架，它使构建动态接口变得简单，而不会离开 Laravel 的舒适性。

安装 Laravel

此刻，我们使用的是 Laravel 10。现在我们来安装 Laravel 项目。

$ composer global require laravel/installer	
$ laravel new livewire3

# 如果是 windows，此步骤可以不执行
$ chmod -R 777 storage/

关于虚拟主机，请自行配置。

配置数据库

.env 文件

DB_DATABASE=livewirev3
DB_USERNAME=livewirev3
DB_PASSWORD=livewirev3

安装 Livewire v3

$ cd livewire3
$ composer require livewire/livewire

Livewire 初体验

如果不知道命令的含义，请暂时不要在意，跟着操作就行了。后续都会学到。

1）创建组件

$ php artisan make:livewire Test

2）添加内容

resources/views/livewire/test.blade.php

<div>
    <h2>Livewire v3 初体验</h2>
</div>

3）使用组件

resources/views/welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>
    </head>
    <body class="antialiased">
        <!-- 使用组件 -->
        <livewire:test/>
        <livewire:test/>
    </body>
</html>

组件可以被多次使用

4）查看效果

浏览器中访问，看到如下效果即可。

准备工作

现在，我们执行默认的数据迁移文件，生成默认的数据表，以备后用。

$ php artisan migrate

请登录后再评论