2

我对 NuxtJS 相当陌生，所以如果它是一个新手问题，请原谅我。我使用 JavaScript、Tailwind 和 SSR 设置 NuxtJS。所以下面的代码工作正常，但我想从包中导入 Splide。

页面/index.vue

<template>
  <div id="image-slider" class="splide">
    <div class="splide__track">
      <ul class="splide__list">
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m03.jpg" />
        </li>
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m04.jpg" />
        </li>
        <li class="splide__slide">
          <img src="https://splidejs.com/wp-content/uploads/2019/08/m05.jpg" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    document.addEventListener('DOMContentLoaded', function () {
      new Splide('#image-slider').mount();
    });
  },
  head() {
    return {
      link: [
        { rel: 'stylesheet', href: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/css/splide.min.css' }
      ],
      script: [
        { src: 'https://cdn.jsdelivr.net/npm/@splidejs/splide@latest/dist/js/splide.min.js', defer: true, body: true }
      ]
    }
  }
}
</script>

我尝试通过这些步骤导入它：pages/index.vue

<script>
export default {
  mounted() {
    new Splide('#image-slider').mount();
  },
}
</script>

插件/splide.js

import Vue from 'vue';
import Splide from '@splidejs/splide';
Vue.use(Splide);

nuxt.config.js

plugins: [
    { src: '~/plugins/splide', mode: 'client', ssr: false }
  ],

但这在我的浏览器控制台中给了我以下错误：

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'function Vue (options) {
  if ( true &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword');
  }
  this._init(options);
}' is not a valid selector.

试用 vue 滑块：

插件/splide.js

import Vue from 'vue';
import { Splide, SplideSlide } from '@splidejs/vue-splide';
Vue.use(Splide);
Vue.use(SplideSlide);

给我这个错误：

Could not find a declaration file for module '@splidejs/vue-splide'.
Try `npm i --save-dev @types/splidejs__vue-splide`
4

0 回答 0