Laravel Nova CSS / JavaScript

CSS

Nova 使用 Tailwind.css 庫(kù)來(lái)作為前端的樣式。因此，對(duì)于自定義的組件你可以隨意使用 Tailwind 的功能和類(lèi)。

JavaScript

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

Axios

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

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

Nova 請(qǐng)求

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

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

事件機(jī)制

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

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

消息通知

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

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

全局變量

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

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

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

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

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

一旦通過(guò) provideToScript 方法加載了新變量，你可以用全局的 Nova JavaScript 對(duì)象訪(fǎng)問(wèn)它:

const name = Nova.config.user.name;

其它可用的庫(kù)

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