Nuxt.js错误呈现功能或未在组件中定义的模板：轮播

Question

我已经通过npm安装了vue轮播

  "dependencies": {
   "nuxt": "^1.0.0",
    "vue-carousel": "^0.6.9"
  },

现在在我的nuxt配置中

  plugins: [
  '~/plugins/vue-carousel'
 ],

还有vue-carousel.js

import Vue from 'vue';
import VueCarousel from 'vue-carousel';

 Vue.use(VueCarousel);

现在在我的组件中将其用作

<template>
   <div>
        <carousel>
        <slide>
             Slide 1 Content
        </slide>
        <slide>
            Slide 2 Content
         </slide>
       </carousel>
   </div>
  </template>
 <script>

   import Carousel from 'vue-carousel';
   import Slide from 'vue-carousel';
   export default {
      components:{
         Carousel,Slide
      }

    }

我在哪里出错并收到错误

render function or template not defined in component: carousel

Answer 1

Nuxt提供了一种不同的方式来配置和包含vue-carousal项目中的软件包

以下是步骤

• vue-carousal作为本地依赖项安装

  npm install --save vue-carousel

• 在nuxt项目的plugins目录下，创建一个文件plugins/externalVueCarousal.js并vue-carousal作为全局组件添加（参考链接）

import Vue from 'vue'; import VueCarousel from 'vue-carousel'; Vue.use(VueCarousel);

• 在nuxt.config.js文件中，在下面包含以下代码plugins

plugins: [{ src: '~/plugins/externalVueCarousal.js', ssr: false }],

• 现在可以vue-carousal在页面或组件中使用该项目。vue-carousal配置了全局范围。

• 在页面或组件下尝试vue-carousal官方网站上给出的示例

样例程序

如果您想尽快测试程序，请在页面/组件下方的代码下方放置并验证结果，以防万一

<template>
  <div class="mycarousal">
    <carousel :perPage="1">
      <slide>
        <span class="label">Slide 1 Content</span>
      </slide>
      <slide>
        <span class="label">Slide 2 Content</span>
      </slide>
      <slide>
        <span class="label">Slide 3 Content</span>
      </slide>
    </carousel>
  </div>
</template>

<style>
  body{
    background-color: yellow;
  }
  .mycarousal{
    left: 50%; 
    top: 50%;
    position: relative;
    width: 700px;
    transform: translateX(-50%);
  }
  .VueCarousel{
    display:inline-block;
  }
  .VueCarousel-slide {
    position: relative;
    background: #42b983;
    color: #fff;
    font-family: Arial;
    font-size: 24px;
    text-align: center;
    min-height: 100px;
  }
</style>

从 https://nuxtjs.org/examples/plugins/ 引用