你好

你好！请问有什么我可以帮您的？

这是一个基础的Vue和Element UI聊天页面模板。这个模板适用于PC端和移动端。你可以根据需要进行调整和优化。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue + Element UI 聊天页面</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
    <div id="app">
        <el-container>
            <el-header>IM 聊天</el-header>
            <el-main>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-card shadow="hover">
                            <div v-for="(msg, index) in messages" :key="index">
                                <div v-if="msg.type === 'self'" class="text-right">
                                    <span>{{ msg.content }}</span><br>
                                    <el-avatar size="32" src="https://i.imgur.com/5Y58zCd.png"></el-avatar>
                                </div>
                                <div v-else>
                                    <el-avatar size="32" src="https://i.imgur.com/Gffi44n.png"></el-avatar>
                                    <span>{{ msg.content }}</span>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                    <el-col :span="6">
                        <el-card shadow="hover">在线用户列表</el-card>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="18">
                        <el-input v-model="inputMessage" placeholder="输入消息" @keyup.enter.native="sendMessage"></el-input>
                        <el-button type="primary" @click="sendMessage">发送</el-button>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>

    <script src="https://vuejs.org/js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                inputMessage: '',
                messages: []
            },
            methods: {
                sendMessage() {
                    if(!this.inputMessage) return;
                    this.messages.push({content: this.inputMessage, type: 'self'});
                    this.inputMessage = '';
                }
            }
        });
    </script>
</body>
</html>

这个模板仅仅提供了基本的聊天布局和非实时在线聊天功能。你需要根据自己的需求添加其他功能，例如实时更新聊天信息，调整风格等。可以考虑使用socket通信实现实时聊天功能。希望这个初始模板能够帮助到你！