1つまたは複数のインスタンスを表示しますか？

Question

私はVue（Laravelとの組み合わせ）でかなり新しいです。私は最高のvue（ファイル）構造が何か分かりません。

たとえば、私はvueチャットアプリケーションとスライドアウトするサイドバーを持っています。現時点では、＃app要素に1つのvueインスタンスを作成しています。すべてのコードは、この1つのvueインスタンスにあります。チャタップとサイドバーのインスタンスのデータとコードをどのように分離する必要がありますか？

Vue.component('chat-message', require('./components/ChatMessage.vue')); 
Vue.component('chat-log', require('./components/ChatLog.vue')); 
Vue.component('chat-composer', require('./components/ChatComposer.vue')); 

    new Vue({ 
     el: "#app", 
     data: { 


**//Data for the chatapp** 

      messages : [], 

**//Data for the sidebar** 

      showSidebar: false 
     }, 

**//Code for the chatapp** 

     methods:{ 
      addMessage(message) { 
       this.messages.push(message); 
       axios.post('messages', message) 
      } 
     }, 
     created() { 
      axios.get('messages').then(response => { 
       this.messages = response.data; 
     }); 

      Echo.join('chatroom') 
       .listen('MessagePosted', (e) =>{ 
       this.messages.push({ 
       message: e.message.message, 
       user: e.user, 
      }) 
     }); 
     } 
    }); 

私は2つの別々のファイル（chatappに特に方法や他のコード、例えばchatroom.vueとsidebar.vue）にこのコードを区切るだけ例えばクリーンVUEのインスタンスをロードするためにprefere：

//Import components... 
... 
... 
    new Vue({ 
     el: "#app" 
    }); 

。このコードをコンポーネントに入れることはできますか？そして、どのように見えるでしょうか？

ありがとうございました。

Answer 1

あなたはそうです、それを2つの異なるコンポーネントに分けることができます。

chatroom.vue

import ChatMessage from './components/ChatMessage.vue'; 
import ChatLog from './components/ChatLog.vue'; 
import ChatComposer from './components/ChatComposer.vue'; 

export default { 
    components: { 
     ChatMessage, 
     ChatLog, 
     ChatComposer, 
    }, 
    data: { 
     // Data for the chatapp 
     messages : [], 
    }, 
    // Code for the chatapp 
    methods:{ 
     addMessage(message) {} 
    }, 
    created() {} 
} 

sidebar.vue

export default { 
    data: { 
     // Data for the sidebar 
     showSidebar: false, 
    }, 
    // Code for the sidebar 
} 

app.js

import ChatRoom from './chatroom.vue'; 
import SideBar from './sidebar.vue'; 

new Vue({ 
    el: "#app", 
    components: { 
     ChatRoom, 
     SideBar, 
    }, 
});