Nuxt Vue 中的 Splidejs

Posted 2023-03-07

【中文标题】Nuxt Vue 中的 Splidejs

【英文标题】：Splidejs in Nuxt Vue

【发布时间】：2021-04-09 05:55:18

【问题描述】：

有没有人尝试在 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 ),
   );

这是 splide 网站上的链接：splide instructions

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

【参考方案1】：

好的，谢谢尼克，

我还进行了一些其他更改以使其正常工作，这对我来说是有效的代码：

slider.vue（在组件下）

<template>
    <div>
        <splide :options="options">
        <splide-slide>
            <h1>boo1</h1>
            <!-- <img src="../assets/img/mw-logo.png" >         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" >         -->
        </splide-slide>
        <splide-slide>
            <h1>boo2</h1> 
            <!-- <img src="../assets/img/mw-logo.png" >         -->
        </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'
  ],

splide.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（页面下）

<slider />    

【讨论】：

你能构建你的应用程序还是仅仅看到它与“Nuxt dev”一起工作？

【参考方案2】：

将splide.js 重命名为splide.client.js，这样它就被定义为客户端插件。

Nuxt docs.

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