如何解决NuxtJS 插件不能作为包导入
我对 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>
我尝试通过以下步骤导入它: 页面/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 splider:
插件/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`
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。