Как импортировать JS библиотеки в шаблоне laravel - blade? - PullRequest
Новая
       7

Как импортировать JS библиотеки в шаблоне laravel - blade?

0 голосов
/ 21 сентября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 21 сентября 2018

Извлеките свой js-код в один файл, шаблоны блейдов не скомпилированы, и он не будет работать, если вы импортируете его туда.

Так что скопируйте все, скажем, app.js, а затем включите его через скриптtag

Внутри app.js вы можете импортировать лайтбокс из 'vue-simple-lightbox'

Теперь убедитесь, что вы добавили его в файл webpack.mix через 

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

Таким образом библиотека будет скомпилирована в ресурс.

Теперь, что касается tempalete VUE, не находящего компонент лайтбокса.
Вы забыли добавить компонент Vue.экземпляр: 

import Lightbox from 'vue-simple-lightbox'

export default {
components: {
  Lightbox //HERE
},
...
0 голосов
/ 21 сентября 2018

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

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