Question

我想为我的项目创建一个仪表板，而我正在尝试使用Vuetify和路由器。代码是：

import cashmain from './views/CashierMain.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path:'cashier/main',
      name:'cashmain',
      component:cashmain
    }
  ]
})

视图中的cashierview.vue看起来像这样：

<template>
  <corousel></corousel>
</template>

<script>
  import corousel from './../components/AppCorousel'
  export default{ 
      name: 'App',  
      components:{
        corousel
      }
  }
</script>

corousel如下所示：

<template>
  <v-carousel height="835">
    <v-carousel-item
      v-for="(item,i) in items"
      :key="i"
      :src="item.src"
      reverse-transition="fade"
      transition="fade"
    ></v-carousel-item>
  </v-carousel>
</template>

<script>
export default {
    data () {
      return {
        items: [
          {
            src: './img/1.jpg'
          },
          {
            src: './img/2.jpg'
          },
          {
            src: './img/3.jpg'
          },
          {
            src: './img/4.jpg'
          }
        ]
      }
    }
  }
</script>

<style lang="stylus">
  #example-custom-transition
    .fade
      &-enter-active, &-leave-active, &-leave-to
        transition: .3s ease-out
        position: absolute
        top: 0
        left: 0

      &-enter, &-leave, &-leave-to
        opacity: 0
</style>

我在控制台中没有收到任何错误，但是在源代码中却出现了此无脚本错误。

很抱歉，没有JavaScript，模型无法正常运行已启用。请启用它以继续。

请帮助我解决问题。

Vue组件未显示

0 个答案: