Orchid 的美学和功能基础是建立在 Bootstrap 的 CSS 和 Hotwired 的 JavaScript 功能之上的。虽然 Orchid 允许集成额外的库以满足项目需求，但我们建议利用这些核心技术来充分发挥 Orchid 功能的潜力。

注意：Orchid 包含原始的 Bootstrap 样式表，这意味着您可以使用 Bootstrap 的全部样式。

使用 Vite

Laravel 默认包含强大的前端构建工具 Vite。为了充分利用这个工具，请确保 Vite 已正确安装和配置。您可以在官方文档页面中找到安装和配置说明。

要成功将获取的资源整合到项目中，您需要在 config/platform.php 文件中指定它们。此文件允许您定义项目中应包含的资源列表。以下是这样的配置示例：

'vite' => [
    'resources/js/app.js',
],

此条目等同于使用 Blade 指令 @vite。通过仔细遵循这些步骤，您可以有效地将 Vite 集成到 Laravel 项目中，并从其使用中获得最佳结果。

加载您的脚本和样式

Laravel Orchid 通过允许使用任何 <link> 或 <script> 标签来促进样式表和脚本的高效交付。要设置资源的 URL，您需要修改 Laravel 应用程序中的 platform.php 文件。

打开您的 config/platform.php 文件，查找 resource 键。在这里，您可以指定托管在 CDN 或公共 URL 上的样式表和脚本的 URL。配置应类似于以下结构：

'resource' => [
    'stylesheets' => [
        // 在此处添加您的样式表 URL
        'https://cdn.example.com/styles/main.css',
    ],
    'scripts' => [
        // 在此处添加您的脚本 URL
        'https://cdn.example.com/scripts/app.js',
    ],
],

在此数组中，将占位符 URL 替换为样式表和脚本文件所在的实际 URL。这样，每当 Laravel Orchid 需要加载这些资源时，它将自动使用此配置中提供的 URL。

要验证 URL 是否正确使用，您可以在浏览器中检查应用程序的页面源代码。查找样式表的 link 标签和 JavaScript 文件的 script 标签，并确保 URL 与配置文件中指定的 URL 匹配。

Turbo

Orchid 的无缝管理面板体验由 Turbo 提供支持。通过 Turbo，我们复制了单页应用程序 (SPA) 的动态，其中资源在初始请求期间加载一次。这种方法最大限度地减少了页面加载时间，从而使内容在浏览器中实时更新。页面之间的过渡被快速的浏览器内内容刷新所取代，这大大改善了交互，使其对用户更流畅、更具吸引力。

由于所有资源将在第一次调用时加载，经典调用将无法正常工作：

document.addEventListener("load", () => {
    console.log('页面加载');
});

它只会执行一次，并且在过渡期间不会再次调用。为避免这种情况，您需要使用 Turbo 事件：

document.addEventListener("turbo:load", () => {
    console.log('页面加载');
})

您可以在网站 turbo.hotwire.dev 上找到更多详细信息。

Stimulus

Stimulus 是来自 Ruby on Rails 开发者的 JavaScript 框架。它使用新的 JavaScript 方法装备前端开发，同时它不寻求控制您的所有操作，也不强制前端与后端分离。

让我们构建一个基本示例来显示输入字段中的文本：

在 resources/js 中创建以下结构：

resources
├── js
│   ├── controllers
│   │   └── hello.js
│   └── dashboard.js
└── views

控制器类内容如下：

// hello.js
export default class extends window.Controller {

    static get targets() {
        return [ "name", "output" ]
    }

    greet() {
        this.outputTarget.textContent =
            `你好, ${this.nameTarget.value}!`
    }
}

以及汇聚点：

// dashboard.js
import HelloController from "./controllers/hello"

application.register("hello", HelloController);

注意：这种结构不会阻止您的应用程序，无论构建何种前端：Angular/React/Vue 等。

使用 Mix 编译

只需在 webpack.mix.js 中描述汇聚：

let mix = require('laravel-mix');

mix.js('resources/js/dashboard.js', 'public/js')

只需在配置文件中将接收到的脚本连接到面板：

// config/platform.php
'resource' => [
    'stylesheets' => [],
    'scripts'     => [
        '/js/dashboard.js'
    ],
],

注意。要应用配置文件的更改，您可能需要清除之前创建的缓存。可以使用 artisan 命令 artisan config:clear 来完成。

运行以构建资源：

npm run production

使用 Vite 编译

对于 Vite，像这样配置您的 vite.config.js：

laravel({
    input: ['resources/js/dashboard.js'],
    refresh: true,
}),

只需在配置文件中将接收到的脚本连接到面板。这处理了必要的模块注入。

// config/platform.php
'vite' => [
    'resources/js/app.js',
],

运行 build 命令将对应用程序的资源进行版本化和打包，并使其准备好部署到生产环境：

# 为生产构建和版本化资源...
npm run build

注意。要应用配置文件的更改，您可能需要清除之前创建的缓存。可以使用 artisan 命令 artisan config:clear 来完成。

运行控制器

要显示，我们将使用一个模板，首先需要在应用程序中定义 Controller 和 Route：

{{-- hello.blade.php --}} 
<div data-controller="hello">
  <input data-hello-target="name" type="text">

  <button data-action="click->hello#greet">
    问候
  </button>

  <span data-hello-target="output">
  </span>
</div>

Vue.js 包裹在 Stimulus 中

许多开发者喜欢 Vue.js 的简单性和强大功能，用于构建交互式和响应式用户界面。在本教程中，我们将向您展示如何将 Vue 组件包装在 Stimulus 控制器中，以便您轻松集成它们。

创建一个 Stimulus 控制器文件，例如 hello_controller.js：

import {createApp} from 'vue';

export default class extends window.Controller {
    connect() {
        this.app = createApp({
            data() {
                return {
                    message: '你好, Vue.js!'
                }
            }
        });

        this.app.mount(this.element);
    }

    disconnect() {
        this.app.unmount();
    }
}

在您的 blade 文件中注册控制器：

<div data-controller="hello">
  @{{ message }}
</div>

现在，当页面加载时，将创建 Vue.js 实例，并在 HTML 元素中显示消息。然后，您可以在 Stimulus 控制器的范围内正常使用 Vue.js。