vue.js：外部 npm 包功能不起作用

Question

我正在使用 vue-cli 工具进行开发，但我无法让 Swiper.js npm 包在我的网站上运行。 TLDR 我已经加载了导入、js 初始化和 css，但是滑动器无法移动到其他幻灯片过去第一张幻灯片并在页面上保持静态。

Here is a demo of what I'm trying to implement, and here is the source code for that demo.

我正在将包中的 js 和 css 文件直接导入到我尝试使用它的特定视图 home.vue 中。

<script>

    //import js and css files
    import Swiper from 'swiper'
    import 'swiper/dist/css/swiper.min.css'

    export default {}

    //initialize swiper
    var swiper = new Swiper('.swiper-container'); 

</script>

我也试过将这些文件全局导入到 main.js 文件中，尽管这似乎给出了相同的结果。

这是我放在 home.vue 模板中的演示中的 HTML：

<template>
  <div>
    <!-- Swiper -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
            <div class="swiper-slide">Slide 4</div>
            <div class="swiper-slide">Slide 5</div>
            <div class="swiper-slide">Slide 6</div>
            <div class="swiper-slide">Slide 7</div>
            <div class="swiper-slide">Slide 8</div>
            <div class="swiper-slide">Slide 9</div>
            <div class="swiper-slide">Slide 10</div>
        </div>
    </div>
  </div>
</template>

这将以与演示相同的方式呈现到页面（显示幻灯片 1，其他幻灯片不可见），但我无法移动到其他幻灯片。

除了已接受的答案外，视图中的此初始化也有效：

<script>

  import Swiper from 'swiper'
  import 'swiper/dist/css/swiper.min.css'

  export default {
    mounted(){
      //initialize swiper when document ready  
      var mySwiper = new Swiper ('.swiper-container', {
      // Optional parameters
      loop: true
      })        
    }
  }

</script>

Answer 1

如文档所述，使用 jquery.onready 或 document.onload 函数。 http://idangero.us/swiper/get-started/#.WWEJplGQyUk

window.onload = function () {
    //initialize swiper when document ready  
    var mySwiper = new Swiper ('.swiper-container', {
       // Optional parameters
       direction: 'vertical',
       loop: true
    });
};

vue.js：外部 npm 包功能不起作用

vue.js: external npm package functionality not working

vue.js

vue-cli