穿着Nuxt Vue的Splidejs

本教程将介绍穿着Nuxt Vue的Splidejs的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

穿着Nuxt Vue的Splidejs 教程 第1张

问题描述

是否有人尝试将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

我最近的错误是&quot;窗口未定义&quot;

推荐答案

好的,感谢尼克

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

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(页面下)

<slider /> 

好了关于穿着Nuxt Vue的Splidejs的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。