Wie importiere ich eine Komponente in Vuejs 2

Question

Ich bin wirklich verwirrt über den Import einer VueJs-Komponente.

Ich verwende Vuejs 2.2.4, und ich muss eine Vuejs-Komponente importieren. Hier ist meine app.js:

Vue.component('Test', require('./Test.vue')); 

const app = new Vue({ 
    el: '#vue-app', 
}); 

Angenommen app.js in MyProject/js/app.js

befindet Und hier ist meine Komponente SimpleCompnent.vue:

<template> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-8 col-md-offset-2"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">Simple Component</div> 
        <div class="panel-body"> 
         I'm an Simple component! 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</template> 

<script> 
    export default { 
     mounted() { 
      console.log('Simple Component mounted.') 
     } 
    } 
</script> 

SimpleCompnent.vue Angenommen in MyProject/js/SimpleCompnent.vue

befindet

Scheint, dass Vue die Komponente nicht laden kann! Es wirft diesen Fehler in der Browser-Konsole:

Uncaught ReferenceError: require is not defined 

Answer 1

Tatsächlich require kann nicht in einem Browser-Kontext, ohne angemessene Unterstützung verwendet werden, so haben Sie mehrere Möglichkeiten:

• erstellen (oder fix) Unterstützung für require.js in Ihrer Anwendung (wie here) . Stellen Sie als ersten Schritt sicher, dass Sie über ein Skript-Tag verfügen, das require.js abruft und über ein data-main-Attribut verfügt, das auf den Einstiegspunkt Ihrer App verweist.

• eine Commonjs Implementierung für den Client verwenden, wie webpack oder browserify kann so require s natürlich in clientseitigen Code geschrieben werden.

• Verwenden Sie eine andere Modulsystemimplementierung, z. oben auf system.js oder ES2015.

So oder so, wenn Sie eine Implementierung wählen die import s (dh ein ES2015-Modul-System) verwendet, können Sie a transpiler verwenden, um Ihren Code zu einem Sprachniveau nach unten kompiliert der Browser jene bösen (Vermeidung unterstützt Unexpected token import Fehler).

Answer 2

Versuchen:

import Test from './Test.vue' 

Sie können ein Beispiel davon here sehen.