tnhnclskn/jetstrap

一个Laravel 10包,可以轻松地将由Laravel Jetstream生成的TailwindCSS资源切换到Bootstrap 4或5。

安装: 3

依赖者: 0

建议者: 0

安全: 0

星标: 0

关注者: 1

分支: 119

语言:Vue

v2.5.2 2021-10-08 15:14 UTC

README

Latest Stable Version Total Downloads License

描述

Jetstrap是一个轻量级的laravel 8包,专注于Laravel应用中安装的Jetstream/Breeze包的VIEW方面,因此当进行交换时,项目中的ACTIONMODELCONTROLLERComponent ACTION类仍然100%由Laravel开发团队处理,没有添加任何复杂的层。

目录

安装

安装Jetstream

您可以使用Composer将Jetstream安装到新的Laravel项目中

composer require laravel/jetstream

如果您选择通过Composer安装Jetstream,则应运行jetstream:install Artisan命令。此命令接受您喜欢的堆栈名称(Livewire或Inertia)。强烈建议在开始Jetstream项目之前阅读Livewire或Inertia的整个文档。此外,您还可以使用--teams开关启用团队支持

使用Livewire安装Jetstream

php artisan jetstream:install livewire --teams

或者,使用Inertia安装Jetstream

php artisan jetstream:install inertia --teams

安装Jetstrap

使用Composer将Jetstrap作为开发依赖项安装到您的Laravel项目中

composer require nascent-africa/jetstrap --dev

无论您如何安装Jetstream,Jetstrap命令与Jetstream非常相似,因为它接受您要交换的堆栈名称(Livewire或Inertia)。

在执行交换之前,您非常重要地安装并配置Laravel Jetstream

在开始Jetstrap项目之前,强烈建议您阅读Jetstream的整个文档。此外,您还可以使用--teams开关像在Jetstream中一样交换团队资源

php artisan jetstrap:swap livewire

or

php artisan jetstrap:swap livewire --teams

php artisan jetstrap:swap inertia --teams

这将发布覆盖以启用类似于旧时代的Bootstrap!

完成安装

在安装Jetstrap和交换Jetstream资源后,从package.json中删除tailwindCSS及其依赖项(如果有的话),然后安装和构建您的NPM依赖项并迁移数据库

npm install && npm run dev

php artisan migrate

额外功能

分页

同样重要的是指出,Laravel 8仍然包含使用Bootstrap CSS构建的分页视图。要使用这些视图而不是默认的Tailwind视图,您可以在AppServiceProvider中调用paginator的useBootstrap方法

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        Paginator::useBootstrap();
    }
}

预设

预设是使用Bootstrap构建的第三方自定义模板。我们考虑过,您有多大可能使用Laravel或Laravel Jetstream提供的默认模板。

假设在运行任何类型的脚手架之前,您已经知道要采取的方式,因此如果您想使用CoreUi或AdminLte预设,则应在第一次运行任何swap命令时在服务提供器中指定选择(JetstrapFacade::useCoreUi3()JetstrapFacade::useAdminLte3())。

如果在执行了交换命令之后您改变了主意,决定使用预设,那么请再次运行jetstrap:swap命令。

核心UI

Core Ui让您节省成千上万的无价时间,因为它提供了一切您需要创建现代、美观和响应式应用程序所需的东西,正如他们的网站所述。

请访问CoreUI的文档以获取更多有关如何使用它的详细信息。

要使用Core Ui预设,只需在您的AppServiceProvider中调用useCoreUi3方法。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useCoreUi3();
    }
}

AdminLTE

AdminLTE是一个开源的仪表板和控制面板主题。基于Bootstrap构建,AdminLTE提供了一系列响应式、可重用和常用组件。

请访问AdminLTE的文档以获取更多有关如何使用它的详细信息。

要使用AdminLte预设,只需在您的AppServiceProvider中调用useAdminLte3方法。

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use NascentAfrica\Jetstrap\JetstrapFacade;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     *
     * @return void
     */
    public function register()
    {
        //
    }

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        JetstrapFacade::useAdminLte3();
    }
}

Breeze

警告!!!:Jetstrap资源已更新以支持Breeze当前版本,但不支持与inertia-react资源的交换。如果您能提供这个功能,请随意提交PR。

根据文档,“Breeze为使用认证构建Laravel应用程序提供了一个最小和简单的起点。”但个人而言,我想把它看作是没有Vue和Bootstrap的Laravel Ui。最近我参与了一个项目,该项目没有使用Vue或需要复杂的认证系统,所以Breeze看起来是个不错的选择,但再次面临TailwindCSS问题,所以我想为什么不让它包含在Jetstrap包中。

在继续之前,请通过官方文档文档熟悉Breeze。

再次提醒,Jetstrap不会影响Breeze的模型/控制器部分,只是视图。

交换Breeze资源

要在配置了Breeze的Laravel中交换tailwind资源为bootstrap,只需运行

php artisan jetstrap:swap breeze

交换Breeze inertia资源

Laravel Breeze现在包含了inertia脚手架的模板,Jetstrap也是如此。要在运行Breeze和inertia的laravel项目中使用Bootstrap脚手架,请运行以下代码

php artisan jetstrap:swap breeze-inertia

接下来,您需要清理您的package.json文件,以确保我们不安装不必要的包。

然后运行

npm install && npm run dev

...然后您就完成了!

在交换breeze资源的同时,在服务提供者中使用JetstrapFacade::useCoreUi3()JetstrapFacade::useAdminLte3();将按预期工作。

测试

使用以下命令运行测试

vendor/bin/phpunit

composer tests

许可证

Jetstrap是一个开源软件,受MIT许可许可。