Question

我想将this library导入我的laravel项目。我已经运行npm install vue-simple-lightbox，然后在刀片模板中有此代码

@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

我应该在哪里导入库？我尝试使用此代码app.js将其导入到window.Lightbox = require('vue-simple-lightbox');文件中，但是我该如何使用它呢？刀片服务器模板似乎不知道什么是“灯箱”。

我收到此错误

[Vue警告]：未知的自定义元素：-您是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

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

Answer 1

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

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

Answer 2

将您的js代码提取到一个文件中，刀片模板不会被编译，如果您将其导入，将无法正常工作。

因此复制所有内容，例如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-刀片模板中导入JS库？

2 个答案: