#javascript #npm #slider #nuxt.js #splidejs
#javascript #npm #ползунок #nuxt.js #splidejs
Вопрос:
Я довольно новичок в NuxtJS, поэтому, пожалуйста, простите меня, если это вопрос новичка. Я настроил NuxtJS с помощью JavaScript, Tailwind и SSR. Итак, следующий код работает нормально, но я хочу импортировать 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>
Я попытался импортировать его с помощью этих шагов:
страницы/index.vue
<script>
export default {
mounted() {
new Splide('#image-slider').mount();
},
}
</script>
plugins/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 amp;amp;
!(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:
plugins/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`