作者：温新

========================================================================

时间：2021-08-13

hi，我是温新，一名PHPer

1）本系列笔记使用Laravel8.x作为演示；

2）使用Livewire2.x版本

什么是Livewire

官方解释：Livewire是Laravel的全栈框架，可简化构建动态接口的过程，而不会给Laravel带来麻烦。

安装Livewire

第一步：准备一个全新的框架并做好相关的数据库工作

第二步：安装laravel/ui并使用bootstrap作为驱动

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">composer</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">require</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">laravel</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">/</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">ui</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">artisan</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">ui</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">bootstrap</span> <span style="box-sizing: border-box;color: rgb(152, 26, 26)">--</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">auth</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">npm</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">install</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">npm</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">run</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">dev</span></span>

第三步：安装Livewire

composer require livewire/livewire

第四步：页面中使用Livewire

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><!</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">doctype</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">html</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">html</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">lang</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">=</span><span style="box-sizing: border-box;color: rgb(170, 17, 17)">"{{ str_replace('_', '-', app()->getLocale()) }}"</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">head</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(0, 0, 0)">@livewireStyles</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">head</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"><</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">body</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">@livewireScripts</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">body</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(152, 26, 26)"></</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">html</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">></span></span>

省略了中间的内容

第五步：生成配置文件

php artisan livewire:publish --config

该命令会在config目录下生成livewire.php配置文件

第六步：查看liveware artisan 命令

<span style="box-sizing: border-box;padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(0, 0, 0)">php</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">artisan</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">    </span><br></br><span style="box-sizing: border-box;padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">configure</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">s3</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">upload</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">cleanup</span>  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Configure</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">temporary</span> <span style="box-sizing: border-box;color: rgb(51, 0, 170)">file</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">upload</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">s3</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">directory</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">to</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">automatically</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">cleanup</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">files</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">older</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">than</span> <span style="box-sizing: border-box;color: rgb(17, 102, 68)">24</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">hrs</span>.</span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(51, 0, 170)">copy</span>                         <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Copy</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">a</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">delete</span>                       <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Delete</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">a</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">discover</span>                     <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Regenerate</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">auto</span><span style="box-sizing: border-box;color: rgb(152, 26, 26)">-</span><span style="box-sizing: border-box;color: rgb(0, 0, 0)">discovery</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">manifest</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">make</span>                         <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Create</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">a</span> <span style="box-sizing: border-box;color: rgb(119, 0, 136)">new</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">move</span>                         <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Move</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">a</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">component</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">publish</span>                      <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Publish</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">configuration</span></span><br></br><span style="box-sizing: border-box;padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(0, 0, 0)">livewire</span>:<span style="box-sizing: border-box;color: rgb(0, 0, 0)">stubs</span>                        <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Publish</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">Livewire</span> <span style="box-sizing: border-box;color: rgb(0, 0, 0)">stubs</span></span>

我是温新

每天进步一点点，就一点点