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