Laravel Nova CSS / JavaScript

CSS

Nova 使用 Tailwind.css 庫來作為前端的樣式。因此，對于自定義的組件你可以隨意使用 Tailwind 的功能和類。

JavaScript

當(dāng)你創(chuàng)建自定義的 Nova 工具，資源工具，卡片，和字段的時候，你可以使用各種各樣的全局可用的輔助函數(shù)。

Axios

Axios HTTP 庫 是全局可用的，它可以讓你很方便地發(fā)送 HTTP 請求到你自定義組件的 Laravel 控制器：

axios.get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

Nova 請求

除了直接用 Axios 之外，你也可以使用 Nova.request() 方法。 這個方法配置了一個單獨的 Axios 實例，它運用預(yù)先配置好的攔截器去處理和重定向 401， 403， 以及 500 服務(wù)器錯誤：

Nova.request().get('/nova-vendor/stripe-inspector/endpoint').then(response => {
    // ...
})

事件機制

你自定義的組件可以使用全局的 Nova JavaScript 對象作為發(fā)布 / 訂閱事件總線機制。 這個機制提供了以下的方法，它和 Vue 提供的 事件方法一致：

Nova.$on(event, callback)
Nova.$once(event, callback)
Nova.$off(event, callback)
Nova.$emit(event, callback)

消息通知

Nova 的 Vue 配置自動注冊了 Vue toasted 插件。因此，在你自定義的組件內(nèi)，你可以利用 this.$toasted 對象去呈現(xiàn)簡單的消息通知：

this.$toasted.show('It worked!', { type: 'success' })
this.$toasted.show('It failed!', { type: 'error' })

全局變量

全局 Nova JavaScript 對象的 config 屬性包含了當(dāng)前 Nova 的 base 路徑和 userId：

const userId = Nova.config.userId;
const basePath = Nova.config.base;

不過，你可以在 Nova::serving 監(jiān)聽器里調(diào)用 Nova::provideToScript 方法去加入額外的值， 這個監(jiān)聽器通常會被注冊在項目或自定義組件的服務(wù)提供者的 boot 方法中：

use Laravel\Nova\Nova;
use Laravel\Nova\Events\ServingNova;

/**
 * 啟動所有的應(yīng)用服務(wù)
 *
 * @return void
 */
public function boot()
{
    Nova::serving(function (ServingNova $event) {
        Nova::provideToScript([
            'user' => $event->request->user()->toArray(),
        ]);
    });
}

一旦通過 provideToScript 方法加載了新變量，你可以用全局的 Nova JavaScript 對象訪問它:

const name = Nova.config.user.name;

其它可用的庫

除了 Axios 之外，在自你定義的組件中，你還可以使用全局通用的 Lodash 和 Moment.js 庫。