Vue 一个或多个实例

Question

我对Vue很陌生(与Laravel结合使用(。我不确定什么是最好的 vue(文件(结构。

例如：我有一个 vue 聊天应用程序和一个滑出的侧边栏。目前，我已经创建了一个 vue 实例(在 #app 元素处(。所有代码现在都在这个 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,
            })
        });
        }
    });

我更喜欢将此代码分离到两个单独的文件中(尤其是聊天应用程序的方法和其他代码，例如chatroom.vue和sidebar.vue(，并且只加载一个干净的vue实例，例如：

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

.我可以将此代码放入组件中吗？这会是什么样子？

谢谢。

Answer 1

你是对的，你可以而且应该把它分成两个不同的组件。

聊天室.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() {}
}

侧边栏.vue

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

应用.js

import ChatRoom from './chatroom.vue';
import SideBar from './sidebar.vue';
new Vue({
    el: "#app",
    components: {
        ChatRoom,
        SideBar,
    },
});