如何在laravel - blade模板中导入js库？

Question

我想将 this library 导入到我的 laravel 项目中。我有运行 npm install vue-simple-lightbox 然后在我的 blade 模板中我有这个代码

@extends('layouts.app')

@section('content')
    {{-- some html code --}}
    <div class="row">
    </div>
    <div class="row">
        <lightbox id="mylightbox" :images="images" :image_class="'img-responsive img-rounded'" :album_class=" 'my-album-class' " :options="options"></lightbox>
    {{-- more html code --}}   
    </div>
@endsection

<style type="text/css">
    .dropdown, .dropdown-menu {
        width: 100%;
    }
</style>

@section('scripts')
    // import the library here?
    <script type="text/javascript">
        let app = new Vue({
            el: '#app',
            data() {
                return {
                    images : [
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img1.jpg',
                            title : 'Image 2'
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img2.jpg',
                            title : 'Image 3'
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img3.jpg',
                            title : ''
                        },
                        {
                            src : 'https://cdn.rawgit.com/vrajroham/vrajroham.github.io/85d64ac5/imgs/img4.jpg',
                            title : ''
                        },
                      ],
                      options : {
                        closeText : 'X'
                      }
                };
            },
            mounted() {
            },
        });
    </script>
@endsection

我应该在哪里导入库？我尝试使用此代码 window.Lightbox = require('vue-simple-lightbox'); 将其导入 app.js 文件，但我该如何使用它？ blade 模板似乎不知道什么是 'lightbox'.

我遇到了这个错误

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

导入库然后在 blade 模板中使用它的正确方法是什么？谢谢！

Answer 1

您可以直接从GitHub导入文件：

<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>

Answer 2

将您的 js 代码提取到单个文件，blade 模板未编译，如果您将其导入到那里，它将无法工作。

所以把所有东西都复制过来说，app.js，然后通过脚本标签包含它

在 app.js 中，您可以 从 'vue-simple-lightbox'

导入灯箱

现在，确保通过

将其添加到 webpack.mix 文件中

.js('path/to/app.js', 'public/js/app.js')

这样库就会被编译到资产中。

现在，关于VUE模板找不到灯箱组件。
您忘记添加 Vue 实例的组件部分：

import Lightbox from 'vue-simple-lightbox'

export default {
components: {
  Lightbox //HERE
},
...

如何在laravel - blade模板中导入js库？

How to import js libraries in laravel - blade template?

lightbox

laravel

vue.js