Vite-Chat聊天室|vue3.5+vite7+pinia3+Vant4移动端仿微信聊天模板

基于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+Vite7+Pinia3+Vant4移动端仿微信聊天室模板

Vue3入口配置main.js

1. 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项目路由配置

项目结构目录简洁，路由地址配置相对简单。

1. 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搭建移动端聊天室的一些简单项目分享，感谢大家的阅读与支持！✍
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！