Laravel 将Vue组件添加到刀片模板_Laravel

Laravel 将Vue组件添加到刀片模板

laravel

Laravel 将Vue组件添加到刀片模板,laravel,Laravel,我尝试使用Vue包VueHighlightJS在刀片模板视图上显示代码块显示。这是我第一次使用Vue，我已经研究过类似的问题，但仍然无法让代码正常工作 js/app.js import Vue from 'vue' import VueHighlightJS from 'vue-highlight.js'; import 'vue-highlight.js/lib/allLanguages' import 'highlight.js/styles/tomorrow-night.css'; V

我尝试使用Vue包VueHighlightJS在刀片模板视图上显示代码块显示。这是我第一次使用Vue，我已经研究过类似的问题，但仍然无法让代码正常工作

js/app.js

import Vue from 'vue'

import VueHighlightJS from 'vue-highlight.js';

import 'vue-highlight.js/lib/allLanguages'
import 'highlight.js/styles/tomorrow-night.css';
Vue.use(VueHighlightJS);

Vue.component('block', require('./components/CodeBlock.vue').default);

const app = new Vue({
    el: '#app',
    components: {
        'block': require('./components/CodeBlock.vue'),
    }
    //router: new VueRouter(routes)
})

代码块

<template>
    <div>

        <div>
            <div class="block shadow flex items-center justify-center">
                <highlight-code class="min-w-full" lang="javascript">
                    hgghfgg
                </highlight-code>
            </div>


        </div>
    </div>
</template>

<script>

    export default {

    }
</script>


HGFGG
导出默认值{
}

尝试在show.blade.php中显示视图

<head>

    <title>Document</title>
</head>
<body>
    <div id="app">
    <h1>{{ $snippet->title }} </h1>

    <div>{{ $snippet->description }} </div>

    <div>{{ $snippet->code }} </div>

        <block></block>


    @yield('content')
    </div>
</body>
</html>


文件
{{$snippet->title}
{{$snippet->description}
{{$snippet->code}
@产量（‘含量’）

是否正在加载vue应用程序创建的app.js？请同时添加您在屏幕上或控制台中收到的错误。Yep。app.js正在我的app.blade.php文件中加载。我也尝试过在我的show.blade.php中添加它，但没有任何运气。“你已经为你展示了所有的代码了吗

show.blade.php

？另外，这是您正在从路由/视图加载的文件，还是您正在扩展的刀片文件？