穿着Nuxt Vue的Splidejs-前端问题

Splidejs in Nuxt Vue(穿着Nuxt Vue的Splidejs)

本文介绍了穿着Nuxt Vue的Splidejs的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否有人尝试将Nuxt中的Vue解决方案用作插件或模块？

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

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

以下是我的文件：

nuxt.config.js

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

plide.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>

plide.js(插件中)

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

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

这是Splide站点上的链接：splide instructions

我最近的错误是"；窗口未定义"；

推荐答案

好的，感谢尼克

我还做了一些其他更改以使其正常工作，这是为我工作的代码：

slder.vue(组件下)

<template>
    <div>
        <splide :options="options">
        <splide-slide>
            <h1>boo1</h1>
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" alt="">         -->
        </splide-slide>
        </splide>
    </div>
</template>

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

nuxt.config.js：

  plugins: [
    {src: '~/plugins/splide.js', mode: 'client'}
  ],

plide.client.js

    import Vue from 'vue';
    import VueSplide from '@splidejs/vue-splide';
    import '@splidejs/splide/dist/css/themes/splide-default.min.css';


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

index.vue(页面下)