Я хочу импортировать эту библиотеку в свой проект 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 warn]: неизвестный пользовательский элемент: - вы правильно зарегистрировали компонент? Для рекурсивных компонентов обязательно укажите опцию «имя».

Как правильно импортировать библиотеку, а затем использовать ее в шаблоне лезвия? Спасибо!

0
Dimitar 21 Сен 2018 в 16:25

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
},
...
1
Marina Mosti 21 Сен 2018 в 13:41

Вы можете импортировать файл прямо из GitHub:

<script src="https://github.com/vrajroham/vue-simple-lightbox/blob/master/dist/vue-simple-lightbox.js"></script>
0
Prince Lionel N'zi 21 Сен 2018 в 13:38