vue2.0 全家桶仿微信聊天室|vue 聊天模板

基于 vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop 等技术开发的仿微信聊天界面|仿微信聊天室 vue-chatRoom，新增了消息下拉刷新，实现了消息发送，图片、视频预览，打赏、红包等功能。 https://www.cnblogs.com/xiaoyan2017/p/10657781.html

技术：

• MVVM 框架：Vue2.0、vue-cli
• 状态管理：Vuex
• 页面路由：Vue-router
• 弹窗插件：wcPop
• 打包工具：webpack 2.0
• 环境配置：node.js + cnpm
• 图片插件：vue-photo-preview

项目截图：

<template> <div class="weChatIM__panel clearfix"> <div class="we__chatIM-wrapper flexbox flex__direction-column"> <!-- //顶部 --> <header-bar :class="{'topfixed': isTopFixed}"></header-bar> <!-- //主页面 --> <div class="wcim__container flex1"> <keep-alive><router-view></router-view></keep-alive> </div> <!-- //底部 tab --> <tab-bar></tab-bar> </div> </div> </template> <script> import headerBar from './components/header' import tabBar from './components/footer' export default { name: 'app', data () { return { isTopFixed: true } }, components: { headerBar, tabBar } } </script> <style> /* 引入公共样式 */ @import './assets/fonts/iconfont.css'; @import './assets/css/reset.css'; @import './assets/css/layout.css'; </style> 

欢迎大家一起交流、学习 Q：282310962 wx：xy190310