vue3-chat移动端聊天模板|vite7+vant4仿微信聊天

原创

andy2018

修改于 2026-03-01 08:34:19

820

文章被收录于专栏：h5h5

2026年重磅研发vite7+vue3+pinia3+vant4高颜值移动端仿微信界面聊天实例Vue3Chatroom。

vite7-wechat包含聊天+通讯录+我的模块，支持图文消息/gif动图、图片/视频预览、红包/朋友圈等功能。

使用技术

开发工具：vscode
使用技术：vite7+vue3.5+pinia3+vue-router@4
组件库：Vant-UI4.x (有赞移动端Vue3组件库)
弹窗组件：V3Popup（基于vue3.0自定义弹窗组件）
iconfont图标：阿里字体图标库
自定义顶部导航条+底部tabBar

项目框架目录

使用最新前端技术工具vite7.x搭建项目，vue3 setup语法糖编码开发。

vue3自定义各种弹窗功能。

vue3实现仿微信朋友圈功能。

package.json配置

{
  "name": "vue3-wechat",
  "description": "基于Vite7+Vue3.5+Pinia3+Vant4移动端仿微信聊天实例 Q: 282310962",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "pinia": "^3.0.3",
    "pinia-plugin-persistedstate": "^4.5.0",
    "vant": "^4.9.21",
    "vue": "^3.5.22",
    "vue-router": "^4.6.3"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.1",
    "vite": "^7.1.7"
  }
}

项目入口文件

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

// 引入路由/状态管理
import Router from './router'
import Pinia from './pinia'

import Plugins from './plugins'

const app = createApp(App)

app
.use(Router)
.use(Pinia)
.use(Plugins)
.mount('#app')