基于vue3.5+vite7+vant4.x手搓mobile端微信界面聊天实例Vue3-WeChat。
vite-chatroom ：使用最新前端技术栈Vue3+Vite7+Pinia3+Vant4实战仿微信界面移动端聊天实例项目。包含聊天/通讯录/我的 模块，支持图文消息/gif动图、图片/视频预览、红包/朋友圈等功能。
Vite7网页版聊天|Vue3.5+Pinia3+ElementPlus仿微信网页端web聊天系统
技术框架
- 编辑器：VScode
- 使用技术：Vite7.x+Vue3.5+Pinia3+Vue-Router4
- UI组件库：Vant-UI4.x (有赞移动端Vue3组件库)
- 弹层组件：V3Popup（基于vue3.0自定义弹窗组件）
- iconfont图标：阿里字体图标库
- 自定义顶部导航条+底部tabBar
项目结构目录
使用最新前端框架 vite7+vue3 搭建项目模板， vue3 setup 语法糖编码页面。
Vue3-WeChat聊天室项目已经同步到我的原创作品集，欢迎下载使用。
Vue3入口配置main.js
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')Vue3项目路由配置
项目结构目录简洁，路由地址配置相对简单。
import { createRouter, createWebHistory } from 'vue-router'
import { appStore } from '@/pinia/modules/app'
import V3Popup from '@/components/v3popup'
const routes = [
// 登录|注册
{
name: 'login', path: '/login',
component: () => import('@/views/auth/login.vue'),
},
{
name: 'register', path: '/register',
component: () => import('@/views/auth/register.vue'),
},
// 首页|通讯录|我|朋友圈|钱包|设置
{
name: 'index', path: '/',
component: () => import('@/views/index.vue'),
meta: { requireAuth: true }
},
{
name: 'contact', path: '/contact',
component: () => import('@/views/contact/index.vue'),
meta: { requireAuth: true }
},
{
name: 'uinfo', path: '/contact/uinfo',
component: () => import('@/views/contact/uinfo.vue'),
},
{
name: 'newfriends', path: '/contact/newfriends',
component: () => import('@/views/contact/newfriends.vue'),
},
{
name: 'addfriends', path: '/contact/addfriends',
component: () => import('@/views/contact/addfriends.vue'),
},
{
name: 'grouplist', path: '/contact/grouplist',
component: () => import('@/views/contact/grouplist.vue'),
},
{
name: 'addgroup', path: '/contact/addgroup',
component: () => import('@/views/contact/addgroup.vue'),
},
{
name: 'my', path: '/my',
component: () => import('@/views/my/index.vue'),
meta: { requireAuth: true }
},
{
name: 'fzone', path: '/my/fzone',
component: () => import('@/views/my/fzone.vue'),
meta: { requireAuth: true }
},
{
name: 'wallet', path: '/my/wallet',
component: () => import('@/views/my/wallet/index.vue'),
meta: { requireAuth: true }
},
{
name: 'setting', path: '/my/setting',
component: () => import('@/views/my/setting.vue'),
meta: { requireAuth: true }
},
// 聊天页面
{
name: 'groupChat', path: '/chat/group-chat',
component: () => import('@/views/chat/group-chat/index.vue'),
meta: { requireAuth: true }
},
{
name: 'groupInfo', path: '/chat/group-chat/groupinfo',
component: () => import('@/views/chat/group-chat/groupInfo.vue'),
meta: { requireAuth: true }
},
{
name: 'redPacket', path: '/chat/group-chat/redpacket',
component: () => import('@/views/chat/group-chat/redPacket.vue'),
meta: { requireAuth: true }
}
]
const router = createRouter({
history: createWebHistory(),
routes: routes,
})
// 全局钩子拦截登录状态
router.beforeEach((to, from, next) => {
const store = appStore()
// 判断当前路由地址是否需要登录权限
if(to.meta.requireAuth) {
if(store.isLogged) {
next()
}else {
// 未登录授权
V3Popup({
content: '还未登录授权！', position: 'top', popupStyle: 'background:#fa5151;color:#fff;', time: 2,
onEnd: () => {
next({ path: '/login' })
}
})
}
}else {
next()
}
})Vue3自定义导航条+菜单栏
如上图：顶部导航栏topbar和底部菜单栏tabbar均是使用vue3.0自定义组件实现功能。
综上就是vite7+vue3搭建移动端聊天室的一些简单项目分享，感谢大家的阅读与支持！✍🏻
附上几个最新实战项目
uniapp+deepseek流式ai助理|uniapp+vue3对接deepseek三端Ai问答模板
Vite7+DeepSeek网页版Ai助手|vue3+arco网页web流式生成ai聊天问答系统
electron39-vue3ai电脑端AI模板|electron39+deepseek+vite7聊天ai应用
vite7+deepseek流式ai模板|vue3.5+deepseek3.2+markdown打字输出ai助手
Electron38-Vue3OS客户端OS系统|vite7+electron38+arco桌面os后台管理
Electron38-Wechat电脑端聊天|vite7+electron38仿微信桌面端聊天系统
electron38-admin桌面端后台|Electron38+Vue3+ElementPlus管理系统
最新版uniapp+vue3+uv-ui跨三端短视频+直播+聊天【H5+小程序+App端】
最新版uni-app+vue3+uv-ui跨端仿携程酒店预订模板【H5+小程序+App端】
Flutter3-MacOS桌面OS系统|flutter3.32+window_manager客户端OS模板