Nuxtjs 错误渲染函数或模板未在组件中定义：旋转木马

Question

我已经通过 npm 安装了 vue carousel

  "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-carousel 包

步骤如下

安装 vue-carousel 作为本地依赖项

npm install --save vue-carousel

在nuxt项目中，在plugins目录下创建一个文件plugins/externalVueCarousel.js并添加vue-carousel作为全局组件(reference link)

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

在 nuxt.config.js 文件中，在 plugins

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

项目现在可以在页面或组件中使用 vue-carousel。 vue-carousel 配置了全局范围。
在页面或组件下尝试vue-carousel official website
中给出的示例

示例程序

如果您想尽快测试程序，请将下面的代码放在 pages/components 下并验证结果 in-case

<template>
  <div class="mycarousel">
    <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;
  }
  .mycarousel{
    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/

Nuxtjs 错误渲染函数或模板未在组件中定义：旋转木马

Nuxtjs error render function or template not defined in component: carousel

javascript

vuejs2

nuxt.js