Webpackを使用してVueコンポーネントをインポートする

Question

私はWebpackでhello world Vueアプリケーションをセットアップし、初期Appコンポーネントを動作させて本体にマウントしています。そのAppコンポーネント内では、私が作ったコンポーネントをもっと使う方法は分かりません。

main.js

import Vue from 'vue' 
import App from './app.vue' 

new Vue({ 
    el: 'body', 
    components: { App } 
}) 

私が使用してみました

import TopBar from './top-bar.vue' 

両方main.jsにおいて

とapp.vueその後のスクリプトセクションを試みた

<template> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
    export default { 
     data() { 
      return { 
       message: 'Hello World' 
      } 
     } 
    } 
</script> 

app.vue

<top-bar></top-bar> 

運がない。

私は、そのようなことはありませんVueのドキュメントのように、適切にコンポーネントを登録する方法欠けていると思う：

Vue.component('top-bar', TopBar); 

しかし、私は別の何かをする必要がありVUE-ローダーでのWebPACKを使用したとき、私は思います。

<template> 
    <top-bar></top-bar> 
    <div class="message">{{ message }}</div> 
</template> 

<script> 
    import TopBar from './top-bar.vue' 
    export default { 
     data() { 
      return { 
       message: 'Hello World' 
      } 
     }, 
     components: { 
      TopBar 
     } 
    } 
</script> 

Answer 1

以下に示すようにコンポーネントオブジェクトに適切な名前を付けます。

<template> 
    <nav-bar></nav-bar> 
</template> 

<script> 

    import TopBar from './TopBar.vue' 

    export default { 
     components: { 
      'nav-bar': TopBar 
     } 
    } 
</script> 

Answer 2

あなたがすることができます：あなたが示したようにあなたがグローバルに登録することができ、またはあなたがVueのインスタンスのcomponentsオブジェクトに追加する必要があり、単一のコンポーネントで使用するためにローカルに登録したい場合は