Question

我在Laravel和Vue.js上遇到问题。

我无法理解如何在 Laravel 5 中将vue-slick添加到刀片中。

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

我的步骤：

通过NPM（npm install vue-slick）安装软件包
添加新组件Vue，现在，我不知道该怎么办。

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

非常感谢。

Answer 1

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

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

1 个答案: