Laravel 8 Inertia HighCharts 未在 app.js 中导入答案

【问题标题】：Laravel 8 Inertia HighCharts not being imported in the app.jsLaravel 8 Inertia HighCharts 未在 app.js 中导入
【发布时间】：2021-04-21 17:07:45
【问题描述】：

我正在尝试将 Highcharts 与 Laravel 8 中的 app.js 与 Vue 和 Inertia 集成。我想弄清楚如何通过 HighchartsVue。我正在尝试将它传递给 createApp 的使用函数。但是，我无法在模板中访问它。

App.js

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import HighCharts from ""
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

我的模板尝试访问 Vue 模板。我这里没有包含整个模板。

Vue 模板

<div>
    <highcharts :options="indexOptions"></highcharts>
</div>

【问题讨论】：

标签： laravel vue.js highcharts inertiajs

【解决方案1】：

对于全球注册：

在您安装“highcharts-vue”后使用：

npm install highcharts-vue

在您的app.js 中将其全局注册为插件：

import HighchartsVue from 'highcharts-vue'

接下来将其注册为您的 vue 对象中的插件：

Vue.use(HighchartsVue)

请参阅文档here 了解更详细的说明（以及如何在组件中本地注册）。

安装后，您的app.js 将如下所示：

require("./bootstrap");

// Import modules...
import { createApp, h } from "vue";
import HighchartsVue from 'highcharts-vue'
import {
    App as InertiaApp,
    plugin as InertiaPlugin,
} from "@inertiajs/inertia-vue3";

Vue.use(HighchartsVue);

const el = document.getElementById("app");

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);

【讨论】：