如何在 Nuxt 中使用猫头鹰旋转木马？

我想让脚本在每个页面上工作，而不需要加载这些页面； 我的静态文件夹中有 owl caroussel 脚本，我已经将其放入 nuxt.config.js 中，我的放置方式如下：

head: {
    title: 'title',
    htmlAttrs: {
        lang: 'en'
    },
    meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { name: 'format-detection', content: 'telephone=no' }
    ],
    link: [
        { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [{
            src: process.env.BASE_URL_ROOT + "/jquery-3.3.1.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/owl.carousel.min.js",
            type: "text/javascript"
        },
        {
            src: process.env.BASE_URL_ROOT + "/main-script.js",
            type: "text/javascript"
        }
    ]
},

我的 main-script.js 上有脚本：

$(document).ready(function() {

$('.owl-menu').owlCarousel({
    loop: true,
    responsiveClass: true,
    center: true,
    items: 6,
    nav: true,
    dots: false,
    autoWidth: true,
    responsive: {
        600: {
            items: 6,
            nav: true,
            autoWidth: true,
            center: true,
            loop: true
        },
    }
})

$('.owl-video').owlCarousel({
    loop: true,
    center: true,
    items: 3,
    margin: 10,
    nav: true,
    dots: true,
    responsive: {
        600: {
            items: 3,
            margin: 12,
        },
    },
    navContainer: "#nav-conte",
    navText: [
        '<i class="far fa-arrow-alt-circle-left" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>',
        '<i class="far fa-arrow-alt-circle-right" aria-hidden="true" style="color: rgba(0,0,0,0.67843);"></i>'
    ]
})
})

如果页面已加载，则轮播在页面上运行良好，但如果它来自 nuxt 导航，则轮播脚本将不再工作。

我使用的解决方案是 MutationObserver，它查看 DOM 上的更改；在我的main-script.js:

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

var observer = new MutationObserver(function(mutations, observer) {
    // my owl caroussel script
});

observer.observe(document, {
    subtree: true,
    attributes: true
});

在这里，您使用了一些依赖于选择 DOM 特定部分的 jQuery 代码。同时，现在的前端框架确实以不同的方式处理 DOM，并且更多地依赖于状态或refs https://v2.vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements比实际的querySelector.

因此，我什至不建议尝试连接它。您可能应该尝试使用 Vue 包来实现相同类型的功能。
它可能会更轻（捆绑包大小），更容易与您的 Nuxt 应用程序集成，并且您不会依赖错误和黑客行为。

检查此轮播列表：https://github.com/vuejs/awesome-vue#carousel https://github.com/vuejs/awesome-vue#carousel

我确实用vue-awesome-swiper https://github.com/surmon-china/vue-awesome-swiper，更多的是较重的一面，但确实很完整。

另外，我不知道你是否真的需要在 Vue 之上的 Nuxt 应用程序中添加 jQuery，但如果你想要一种干净简单的方法将其安装到你的 Nuxt 应用程序中，请按照我的其他答案进行操作：https://stackoverflow.com/a/68414170/8816585 https://stackoverflow.com/a/68414170/8816585

编辑，甚至owl carousel 贬低自己 https://github.com/OwlCarousel2/OwlCarousel2如你看到的