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-carousal包的方式不同

以下是步骤

将vue-carousal安装为本地依赖项

npm install --save vue-carousel
在nuxt项目中，在plugins目录下创建文件plugins/externalVueCarousal.js并添加vue-carousal作为全局组件（reference link）

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 official website

示例程序

将代码放在页面/组件下面，如果您想尽快测试程序，请在结果中验证结果

<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/

Nuxtjs错误渲染函数或模板未在组件中定义：carousel

1 个答案: