Vue3 高仿PC微信聊天界面 | 前端实战练手项目分享

大家好，今天给大家分享一个我用 Vue3 从零开发的高仿PC端微信聊天界面项目，没有花里胡哨的框架堆砌，纯原生实现核心交互，细节拉满，特别适合前端新手用来练手布局和基础逻辑！

---

一、项目整体效果预览

先给大家放一下最终效果，还原度直接拉满👇

• 左侧好友列表 + 搜索栏 + 功能按钮，完美复刻微信侧边栏
• 右侧聊天主界面，区分左右聊天气泡，支持文字消息发送与时间展示
• 内置可视化消息管理面板，可自定义添加/删除聊天记录
• 底部工具栏支持表情、图片等快捷功能（预留扩展接口）

线上预览地址：https://dxiangwiki.github.io/wechat-chat-demo/

---

二、核心功能详解

1. 标准全屏布局，零多余滚动条

很多新手做全屏项目时，总会出现横向或纵向的多余滚动条，这个项目里我踩过坑后，用一套规范的Flex布局解决了这个问题：

.app-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden; /* 关键：防止内容溢出导致滚动条 */
}

/* 左侧侧边栏固定宽度 */
.sidebar {
  width: 300px;
  height: 100%;
  background: #ededed;
  flex-shrink: 0; /* 关键：防止被挤压变形 */
}

/* 右侧聊天区域自适应铺满 */
.chat-area {
  flex: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fafafa;
}

这样写的好处是，不管窗口怎么缩放，页面都能保持和微信一致的结构，不会出现布局错乱的问题。

2. 双向聊天气泡，精准区分发送方

项目中最核心的就是聊天气泡的实现，通过一个简单的isSelf字段，就能区分自己和好友的消息，实现左右两种不同的样式：

<template>
  <div class="message-item" :class="isSelf ? 'self-message' : 'friend-message'">
    <!-- 好友消息：头像在左，气泡在右 -->
    <template v-if="!isSelf">
      <img class="avatar" :src="friendAvatar" alt="好友头像">
      <div class="bubble bubble-left">{{ message.content }}</div>
    </template>

    <!-- 自己的消息：气泡在左，头像在右 -->
    <template v-else>
      <div class="bubble bubble-right">{{ message.content }}</div>
      <img class="avatar" :src="myAvatar" alt="我的头像">
    </template>

    <!-- 消息时间 -->
    <div class="time">{{ message.time }}</div>
  </div>
</template>

<script setup>
const props = defineProps({
  message: {
    type: Object,
    required: true
  },
  isSelf: {
    type: Boolean,
    default: false
  }
})
</script>

再配合一点简单的CSS，就能做出微信那种圆润、带小尾巴的气泡效果，同时时间也会自动根据消息位置居中显示，细节直接拉满。

3. 实时消息发送，自动获取当前时间

项目实现了基础的消息发送功能，输入框输入内容后点击发送，消息会自动添加到聊天列表底部，同时自动获取当前时间并格式化显示：

import { ref } from 'vue'

const inputValue = ref('')
const messageList = ref([
  { content: '哈喽，在吗？', time: '14:20', isSelf: false },
  { content: '在的呢，有啥事呀', time: '14:21', isSelf: true }
])

const sendMessage = () => {
  if (!inputValue.value.trim()) return
  // 格式化当前时间
  const now = new Date()
  const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`
  // 添加消息到列表
  messageList.value.push({
    content: inputValue.value,
    time,
    isSelf: true
  })
  // 清空输入框
  inputValue.value = ''
  // 自动滚动到最新消息
  const chatContainer = document.getElementById('chat-container')
  chatContainer.scrollTop = chatContainer.scrollHeight
}

同时还加了自动滚动的效果，发送新消息后页面会自动滑到底部，和真实微信的体验完全一致。

4. 可视化消息管理面板，调试超方便

为了方便调试和演示，我额外做了一个可折叠的消息管理面板，不用修改代码，就能手动添加自定义消息：

• 可选择发送身份：好友/自己
• 可自定义消息内容和发送时间
• 一键添加/删除聊天记录
• 支持切换静态/动态消息数据源

这个面板平时可以隐藏，需要调试的时候打开，对新手来说非常友好，不用频繁修改代码就能测试不同的消息场景。

---

三、项目亮点与学习价值

很多人会觉得这种高仿项目没什么技术含量，但其实它能帮你练会很多前端基础能力：

1. Flex布局实战：学会如何用Flex实现固定+自适应的复杂页面结构，解决布局错乱问题
2. Vue基础语法：熟悉组件通信、条件渲染、列表渲染、响应式数据等核心API的使用
3. 细节交互处理：消息自动滚动、输入框焦点、时间格式化等小功能的实现
4. 项目规范意识：学会合理划分组件结构，让代码更易维护

而且整个项目没有引入任何第三方UI库，所有样式都是手写的，对理解CSS布局和原生JS逻辑非常有帮助。

---

四、快速上手与扩展方向

1. 本地运行

git clone https://github.com/dxiangwiki/wechat-chat-demo.git
cd wechat-chat-demo
npm install
npm run dev

打开http://localhost:5173就能直接体验完整效果，修改代码后热更新也很方便。

2. 后续可扩展方向

如果想把这个项目做得更完善，还可以尝试：

• 对接WebSocket实现实时聊天功能
• 支持表情、图片、文件发送
• 实现消息已读/未读状态
• 添加好友列表切换、聊天记录本地存储
• 适配移动端响应式布局

---

五、开源地址

项目已在GitHub开源，欢迎大家Star、Fork，一起交流学习！

• GitHub仓库：https://github.com/dxiangwiki/wechat-chat-demo
• 线上预览：https://dxiangwiki.github.io/wechat-chat-demo/

如果文章对你有帮助，欢迎点赞收藏，也可以在评论区聊聊你对这个项目的改进想法，我们一起讨论！