如何在 laravel - Blade 模板中导入 js 库？答案

【问题标题】：How to import js libraries in laravel - blade template?如何在 laravel - Blade 模板中导入 js 库？
【发布时间】：2019-02-25 22:11:54
【问题描述】：

我想将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

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

我收到了这个错误

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

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

【问题讨论】：

在标记文件中包含复杂的 JavaScript 逻辑通常是不好的做法。您应该将其分离在一个 JS 文件中，然后您可以使用 import 语句，然后使用 laravel mix 编译该文件

标签： laravel vue.js lightbox

【解决方案1】：

将您的 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
},
...

【讨论】：

【解决方案2】：

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

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

【讨论】：