在vue中使用fotorama

Question

我正在尝试使用Fotorama (图片库)在我的项目上的vue-cli。jQuery 3.5.1和Fotorama使用NPM安装。代码部分：

<script>
    import 'jquery'
    import 'fotorama/fotorama'

    export default {
        // ...
    }
</script>

我知道这个错误：

Uncaught Fotorama requires jQuery 1.8 or later and will not run without it.

怎么让它起作用？

我在做：

1. 使用没有vue的相同版本的jquery和fotorama。它起作用了
2. 通过向挂载钩子中添加脚本标记来使用cdn版本
3. 将jquery和fotorama放在资产文件夹中。Vue显示jquery文件中的错误。
4. 在index.html中添加了脚本标记。50/50的效果。我无法解释这一点，但是当页面重新加载时，这个选项会随机工作。
5. 将jquery和fotorama合并为一个文件

对不起，如果我的问题有错误，我的英语不好。我问这个问题是在我的社区的子领域，但他们帮不了我。也许还有其他库提供了这样的机会。最主要的是，他们有一点重，并且知道如何在滚动时加载图片(不是一次全部)。

Answer 1

我解决了这个问题。

methods {
    // add script tags to head
    loadFotorama() {
        let script = document.createElement('script');
        script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js';
        document.documentElement.firstChild.appendChild(script);
    },
    loadJquery() {
        let script = document.createElement('script');
        script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js';
        document.documentElement.firstChild.appendChild(script);
    }
},
created() {
    this.loadJquery()
},
computed: {
    // this property is true when the server sent links to the desired images
    // images are added to the DOM using v-for
    imagesLoaded() {
        return this.$store.getters.getImagesLoaded
    }
},
watch: {
    imagesLoaded(val) {
        if (val) {
            // while fotorama loads from cdn server vue will create img tags using v-for
            this.loadFotorama()
        }
    } 
}

很好用！感谢所有想帮忙的人

Answer 2

您所得到的错误表明jQuery可能已经过时(但是在通过npm下载时不应该发生这种情况)。

您绝对可以尝试使用：npm update jquery更新包。

第二个问题可能是在vue组件中导入jquery的方式。

试试这个：import $ from 'jquery';

您还简要地提到，您需要一个库，该库在滚动时重一点，并加载图片。我建议试试Macy.js。它只有4kb，所以比jQuery本身要小得多。