Может кто-нибудь подсказать, как шаг за шагом добавить компонент Slick vue в Laravel? - PullRequest
Новая
       8

Может кто-нибудь подсказать, как шаг за шагом добавить компонент Slick vue в Laravel?

0 голосов
/ 26 октября 2018

У меня проблема с Laravel и Vue.js.

Я не могу понять, как добавить vue-slick к моему лезвию в Laravel 5 .

Прочтите, как его использовать здесь (почему кто-то считает, что это хорошая документация)

Мои шаги:

  • Установите пакет с помощью NPM(npm install vue-slick)
  • Добавьте новый компонент Vue, и теперь я не знаю, что делать.

Куда добавить код скрипта?app.js или example.vue?

Большое спасибо.

1 Ответ

0 голосов
/ 08 июля 2019

Я не помню точных настроек при установке Laravel 5 (хотя быстрый взгляд на Github дал мне некоторые воспоминания), но при условии, что компонент ExampleComponent.vue правильно импортирован в app.js, вы должны иметь возможность использовать егов любом блейд-файле, подобном этому <example-component></example-component>, и тогда самым простым способом использования vue-slick будет редактирование файла ExampleComponent.vue следующим образом: 

<template>
    <div class="container">
        <slick ref="slick" class="gallery-container" :options="slickOptions">
            <div class="gallery-item" v-for="picture in pictures" :key="picture.key">
                <img :src="picture.src" class="img-fluid" alt="option image">
            </div>
        </slick>
    </div>
</template>

<script>
    import Slick from 'vue-slick';
    export default {
        components: {
           Slick
        },
        data() {
            return {
                slickOptions: {
                    slidesToShow: 3,
                    slidesToScroll: 1,
                },
                pictures: [
                {
                    key: 'img1',
                    src: '/images/pic1.jpg'
                },
                {
                    key: 'img2',
                    src: '/images/pic2.jpg'
                },
                {
                    key: 'img3',
                    src: '/images/pic3.jpg'
                }]
            };
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
...