1、 Livewire 的安装与初体验

作者: 温新

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

阅读: 128

时间: 2024-02-29 00:28:27

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
请登录后再评论