vue+h5仿微信网页版聊天室vueWebChat项目

很早之前就有使用html5技术开发过一个 web版仿微信、微博聊天，后来想着用vue技术开发一版，后面由于各种事情，一直没能落定。最近有些空闲就使用vue开发了一个 vueWechat聊天室IM项目。 基于Vue2.5.6+Vuex+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术开发，实现了发送消息、表情(动图)，图片、视频预览，仿微信右键菜单、网页截图可直接粘贴至编辑框发送。 

vue技术选型

• MVVM框架：Vue2.5.6
• 状态管理：Vuex
• 页面路由：Vue-router
• iconfont图标：阿里巴巴字体图标库
• 自定义滚动条：vue-gemini-scrollbar
• 弹窗组件：element-ui（饿了么前端UI库）
• 环境配置：node.js + cnpm + webpack
• 高德地图：vue-amap
• 图片预览：vue-photo-preview

项目预览图

主页面app.vue模板

<template>  <div id="app">    <div class="vChat-wrapper flexbox flex-alignc">      <div class="vChat-panel" style="background-image: url(src/assets/img/placeholder/vchat__panel-bg01.jpg);">        <div class="vChat-inner flexbox">          <!-- //顶部按钮(最大、最小、关闭) -->          <win-bar></win-bar>
          <!-- //侧边栏 -->          <side-bar></side-bar>
          <keep-alive>            <router-view class="flex1 flexbox"></router-view>          </keep-alive>
        </div>      </div>    </div>  </div></template>复制代码

公共模块插件引入

/*    引入公共及全局组件配置    Q：282310962    https://www.cnblogs.com/xiaoyan2017*/ 
// 引入侧边栏及联系人import winBar from './components/winbar'import sideBar from './components/sidebar'import recordList from './componen