Nuxt Vue 中的 Splidejs

有没有人尝试过在 Nuxt 中使用 Vue 解决方案作为插件或模块？

我在尝试以正确的方式做到这一点时遇到了很多挑战！

我正在尝试将 Splide Vue 滑块从 NPM 导入 Nuxt，通过 NPM 安装它后，如何将其导入插件中的 splide.js 文件中似乎存在挑战，然后尝试在 nuxtconfig.js 中解决它：一个插件。我遇到各种各样的错误。

这是我的文件：

nuxt.config.js

modules: [
    // https://go.nuxtjs.dev/bootstrap
    '@nuxtjs/style-resources',
    '@nuxtjs/bulma', 
    '@splidejs/splide'
    
  ],

splide.vue（在 nuxt 组件中）

<template>
  <splide :options="options">
        <splide-slide>
            <h1>boo</h1>
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1>
        </splide-slide>
  </splide>
</template>

<script>
  export default {
      data() {
          return {
              options: {
                rewind : true,
                  width  : 800,
                  perPage: 1,
                  gap    : '1rem',
              },
          };
      },
  }
</script>

splide.js（在插件中）

import Vue from 'vue';
import VueSplide from 'vue-splide';

Vue.use( VueSplide );
new Vue( {
    el    : '#app',
    render: h => h( App ),
  } );

这是幻灯片网站上的链接：滑动指令 https://splidejs.com/integration-vue-splide/

我最近的错误是“窗口未定义”

Rename splide.js to splide.client.js，这样它就被定义为客户端插件。

Nuxt 文档。 https://nuxtjs.org/docs/2.x/directory-structure/plugins/

如果假设插件仅在客户端或服务器端运行，则可以应用 .client.js 或 .server.js 作为插件文件的扩展名。该文件将仅自动包含在各自（客户端或服务器）端。