tiththa/jetstrap

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

维护者

详细信息

github.com/Tiththa/jetstrap

来源

问题

安装: 1

依赖: 0

建议者: 0

安全: 0

星级: 0

关注者: 0

分支: 119

语言:Vue

v10 2023-03-29 07:20 UTC

This package is auto-updated.

Last update: 2024-09-29 10:25:50 UTC


README

Latest Stable Version Total Downloads License

描述

Jetstrap是一个轻量级的Laravel 8包,专注于在您的Laravel应用程序中安装的Jetstream / Breeze包的VIEW方面,因此当进行交换时,您的项目的操作模型控制器组件操作类仍然由Laravel开发团队100%处理,没有任何增加的复杂层。

目录

安装

安装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 许可证 许可。