时间戳

首页 > 解决方案 > 可以告诉别人如何一步一步地在 Laravel 中添加 Slick vue 组件吗？

laravel - 可以告诉别人如何一步一步地在 Laravel 中添加 Slick vue 组件吗？

问题描述

我对 Laravel 和 Vue.js 有疑问。

我不明白如何在Laravel 5中将vue- slick 添加到我的刀片中。

在此处阅读如何使用它 （为什么有人认为这是好的文档）

我的步骤：

我在哪里添加脚本代码？去app.js还是去example.vue？

非常感谢。

标签： laravelvue.jslaravel-5sliderslick.js

解决方案

我不记得安装 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>

推荐阅读