基于Nuxt+VantUI仿微信聊天|nuxt实例聊天模板

概述

NuxtChatIM聊天室是基于Nuxt.js+Vue.js+Vuex+Vant+Node.js技术构建开发的仿微信App界面聊天实例。实现了类似探探卡片滑动效果、消息发送、图片/视频预览、红包/朋友圈等功能。

详细

1、前言

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。让你的Vue网站也能拥有SEO功能。

由于最近Nuxt.js比较火，对于前端开发有必要多掌握一门技术点。最近一直在捣鼓Nuxt.js实例项目开发，于是就开发了一个仿微信App实例。

2、运行效果图

 

3、实现过程

①、自定义headerBar+Tabbar组件

项目中的顶部导航条+底部Tab标签栏组件均是自定义实现功能。

headerBar组件模板

tabBar组件模板

②、自定义弹框组件

VPopup自定义组件实现了Msg消息框、Popup弹层、Dialog对话框、Toast弱提示、ActionSheet动作面板框、Notify通知框等功能。

在main.js中引入vpopup组件

 import Popup from './components/popup' 

 Vue.use(Popup) 

vpopup支持标签式及函数式调用方式。

 

③、仿探探/Tinder卡片式滑动

项目中“翻一翻”页面仿制了类似探探卡片滑动功能。实现了拖拽滑动及点击下方按钮切换卡牌。

页面模块布局分为 顶部headerBar、翻牌子区域、底部tabBar 三个部分。

支持传入的JSON数据格式

module.exports = [
    {
        avatar: '/assets/img/avatar02.jpg',
        name: '放荡不羁爱自由',
        sex: 'female',
        age: 23,
        starsign: '天秤座',
        distance: '艺术/健身',
        photos: [...],
        sign: '交个朋友，非诚勿扰'
    },
     
    ...
]

4、项目结构图