2017-08-21 119 views
0

我收到Vuetify的每個html標籤的這個錯誤。 我使用Vue.js - Vuetify:未知的自定義元素:[...] - 您是否正確註冊了組件?

npm install --save-dev vuetify 

在我main.js安裝Vuetify我:

const Vue = require("vue"); 
const Vuetify = require("vuetify"); 
const tracksList = require("./track-list.vue"); 

Vue.use(Vuetify); 

trackList = new Vue({el: "#track-list", template: "<tracksList/>", components: {tracksList}}); 

文件跟蹤list.vue是:

<template src="../templates/track-list-component.html"></template> 
<script src="./track-list.js"></script> 

在我的模板軌道列表 - component.html,這裏是使用Vuetify的部分:

<div class="track-name-row" 
       v-on:click="expandTrack(project.structure.tracks.indexOf(track))" 
       @contextmenu="show"> 
       <li class="track-color-viewer"></li> 
       <span>{{"Track "+project.structure.tracks.indexOf(track)}}</span> 
       <img class="item-view" src="../assets/img/ic_view.svg" alt="view"> 
      </div> 

      <v-menu offset-y v-model="showMenu" :position-absolutely="true" :position-x="x" :position-y="y"> 
       <v-list> 
        <v-list-tile> 
         <v-list-tile-title>test</v-list-tile-title> 
        </v-list-tile> 
       </v-list> 
      </v-menu> 

軌道-list.js是一個簡單的Vue組件:

module.exports = { 
    name: "track-list", 
    components: { 
      [ ... ] 
    }, 

    data() { 
     return { 
       [ ... ] 
     }; 
    } 
} 

對於導入Vuetify,有沒有其他的東西比故宮安裝Vuetify和main.js使用Vue.use(Vuetify)怎麼辦?我有點迷惘和悲傷,這個自我感覺似乎非常棒。

+0

您的'main.js'看起來不錯,不,沒有額外的步驟。這應該工作。 –

+0

導致錯誤的名稱自定義元素是什麼? – Alfa

+0

@Alfa v-menu v-list v-list-tile v-list-tile-title。 –

回答

0
module.exports = { 
    name: "track-list", 
    components: { 
     [ ... ] 
    }, 
    data() { 
     return { 
      [ ... ] 
     }; 
    } 
} 

應該

module.exports = { 
    name: "track-list", 
    components: { 
     componentName 
    }, 
    data() { 
     return { 
      variableName: '' 
     }; 
    } 
} 

組件應該包括您所使用的所有自定義組件(組件名稱示例)。如果不使用任何部件,則刪除組件部分,

數據應該包含您用於該組件的所有變量(例如variableName)。

+0

我加了「const vuetify = require(」vuetify「);」在我的組件的開始,並在組件列表中「vuetify」。仍然沒有運作。 –

+0

您已經包含vuetify組件。只需刪除組件部分。 –

+0

我放的代碼是一個簡化的代碼,我已經有一個組件(可拖動)。所以我不能刪除組件部分,只是刪除我剛剛添加:) –