README

InertiaUno是一个高级Laravel包，它提供了前端功能并将Unocss集成到您的Laravel项目中。它简化了安装InertiaJS、添加中间件、安装Lodash、UNOCSS和VUE Iconify的过程。它还提供了发布视图、CSS文件、JS文件和Vue文件的命令。

安装

您可以通过Composer安装InertiaUno

composer require estudia/inertia-uno

然后您可以安装InertiaUno并设置其前端功能，运行以下命令

php artisan inertia-uno:install

此命令将引导您完成一系列提示以安装InertiaJS、添加中间件、安装Lodash、UNOCSS、VUE Iconify并发布各种文件。您可以根据项目需求选择要安装的功能。

在Laravel中实现InertiaUno

要展示如何在Laravel项目中实现InertiaUno，请按照以下步骤操作

通过运行以下命令创建一个新的控制器，让我们称它为TestController
```
php artisan make:controller TestController
```

在您的首选代码编辑器中打开TestController文件，并更新__invoke方法以渲染Inertia视图。以下是一个示例

<?php

namespace App\Http\Controllers;

use Inertia\Inertia;

class TestController extends Controller
{
    public function __invoke()
    {
        return Inertia::render('Test', [
            'model' => [
                "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
                "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
            ],
        ]);
    }
}

在这个例子中，我们正在渲染一个名为Test的Inertia视图，并向它传递一个空的模型。您可以根据需要自定义视图名称和数据。

在您的resources/js/Pages目录中创建一个新的Vue组件文件，名为Test.vue。将以下内容添加到文件中
```
<template layout="main">
  <ui-card v-model="model" />
</template>

<script setup>
const { model, get } = useModel();
await get();
</script>
```
此Vue组件使用ui-card组件，并使用useModel获取数据。组件自动导入所需文件。
组件自动导入：当您使用组件时，例如，InertiaUno会自动导入相应的Vue组件文件。例如，如果您使用<ui-card>，InertiaUno将自动导入resources/js/Components/Ui/Card.vue或resources/js/Components/Ui/Card/Index.vue，具体取决于文件的结构。
布局自动导入：如果您的Vue文件中的<template>标签添加了layout属性，InertiaUno将自动导入相应的布局文件。例如，<template layout="main">将导入resources/js/main.vue。

为了说明布局自动导入功能，让我们看看一个示例main.vue布局文件
```
<template>
  <div class="min-h-screen bg-gray-100">
    <header class="bg-white shadow">
      
    </header>

    <main class="container mx-auto py-8">
      <slot></slot>
    </main>

    <footer class="bg-gray-200">
      
    </footer>
  </div>
</template>
```
在这个例子中，main.vue布局文件为您的Vue组件定义了一个布局结构。它使用Uno CSS类（如tailwind）来设置样式。布局包括一个标题、一个主内容区域以及内容容器的容器和一个页脚。<slot></slot>元素允许您的Vue组件动态插入到布局的主内容区域。当您在Vue页面文件的模板标签中指定layout="main"时，InertiaUno将自动导入resources/js/main.vue布局文件，提供布局中定义的结构和样式。这使得您可以在多个页面或组件之间保持一致的布局。
组合式自动导入：当您使用组合式结构时，InertiaUno会自动导入相关文件。在上面的例子中，它使用useModel组合式加载了resources/js/Composables/useModel.js。

为了演示组合式自动导入功能，考虑以下示例代码
```
import { computed } from 'vue';
import { usePage } from '@inertiajs/vue3';

export default function useModel() {
  const page = usePage();

  const model = computed(() => page.props.model);

  async function get() {
    // Perform additional asynchronous work if needed
  }

  return { get, model };
}
```
在这个示例中，useModel 组合式定义在 resources/js/useModel.js 文件中。它使用了 Vue 组合式 API 函数，如 computed 和来自 @inertiajs/vue3 的 usePage 组合式来访问页面属性和获取模型属性。它还包含一个异步获取函数，您可以在需要时执行额外的异步操作。当您在 Vue 文件中使用 useModel 组合式时，InertiaUno 会自动导入 useModel.js 文件，使其在您的应用程序中可用。
UnoCSS 功能：InertiaUno 与 UnoCSS 集成，这是一个以实用工具为主的 CSS 框架。以下是一个使用 Tailwind CSS 功能的 ui-card 组件示例
```
<template>
  <div class="bg-white rounded shadow-md p-4">
    <p class="text-gray-600 mt-4">{{ model.title }}</p>
    <p class="text-gray-800 mt-4">{{ model.description }}</p>
  </div>
</template>
```
在这个示例中，ui-card 组件具有白色背景、圆角和阴影。它还显示了在 Vue 文件中定义的模型引用。
最后，更新您的路由以将 TestController 映射到路由。打开 routes/web.php 文件并添加以下路由
```
use App\Http\Controllers\TestController;
use Illuminate\Support\Facades\Route;

Route::get('/test', TestController::class);
```
此路由将 TestController 映射到 /test URL。

现在，当您访问 Laravel 应用程序中的 /test URL 时，TestController 将渲染 Test Vue 文件，该文件使用 resources/js/Components/Ui/Card.vue 组件。该组件自动导入其他组件、布局和组合文件，这使得在 Laravel 项目中使用 InertiaUno 变得容易。

配置

InertiaUno 发布了一个可定制的配置文件。要发布配置文件，运行

php artisan vendor:publish --tag=inertia-uno-config

这将创建一个 inertia-uno.php 文件在您的 config 目录中，您可以在此处修改包的配置选项。

可用命令

InertiaUno 提供了几个命令来帮助您管理和自定义 Laravel 项目的前端功能。以下是可用命令列表

inertia-uno:install:inertia：安装 InertiaJS 并在您的项目中配置它。
inertia-uno:add:middleware：将 inertia 中间件处理程序添加到您的项目中。
inertia-uno:install:lodash：在您的项目中安装 Lodash。
inertia-uno:install:uno：安装 UNOCSS 并将其集成到您的项目中。
inertia-uno:install:iconify：在您的项目中安装 VUE Iconify。
inertia-uno:publish:view：发布包的视图。
inertia-uno:publish:css：发布包的 CSS 文件。
inertia-uno:publish:js：发布包的 JS 文件。
inertia-uno:publish:vue：发布包的 Vue 文件。
inertia-uno:publish:vite：更新 Vite 配置文件。

使用的技术

InertiaUno 使用以下技术

Laravel：一个强大的 PHP 框架，用于开发 Web 应用程序。
Inertia.js：一种使用服务器端路由构建单页应用程序的现代方法。
UnoCSS：一个以实用工具为主的 CSS 框架，用于快速 UI 开发。
VUE Iconify：一个高质量的开源图标集合，用于 Vue.js。
Vue I18n@9：Vue.js 应用程序的国际化插件。
Lodash：一个用于操作、排序和过滤数组及对象的 JavaScript 工具库。
Vite：一个快速构建工具和开发服务器，用于现代 Web 应用程序。

路线图

InertiaUno 的计划路线图包括以下功能

UI 仪表板：我们计划创建一个 UI 仪表板，其中包含常见的组件和布局，以帮助开发者快速入门 Inertia.js。
预定义布局：我们还计划提供用于常用页面（如登录、注册和仪表板）的预定义布局。
组合式函数：除了useModel，我们计划创建更多开发者可以使用的组合式函数，用于获取数据、处理表单和执行其他常见任务。

我们欢迎社区的贡献和反馈，以帮助改进InertiaUno并使其更加完善！

贡献

InertiaUno欢迎贡献！如果您遇到任何问题或对改进有建议，请在GitHub仓库上打开一个issue。

许可协议

InertiaUno是开源软件，采用MIT许可协议。

estudia / inertia-uno

维护者

详细信息

README

安装

在Laravel中实现InertiaUno

配置

可用命令

使用的技术

路线图

贡献

许可协议