vue 高仿微信即時 IM 聊天|仿微信 vue+h5 版|仿微信介面

1、專案介紹：
運用vue全家桶技術（vue+vue-cli+vuex+vue-router+webpack+node...）實現的高仿微信app聊天系統vue-wechat聊天室，實現了下拉重新整理、訊息表情傳送、大圖預覽、視訊播放、自定義長按選單。。。
2、技術實現：

• MVVM框架：Vue.js 2.0
• 狀態管理：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>

/*主頁面js*/
import Vue from 'vue'
import App from './App.vue'
// 引入js
import $ from 'jquery'
import fontsize from './assets/js/fontsize'
// 引入彈窗外掛
import wcPop from './assets/js/wcPop/wcPop'
import './assets/js/wcPop/skin/wcPop.css'
// 引入餓了麼移動端vue元件庫
import MintUI, { Loadmore } from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.component(Loadmore.name, Loadmore)
Vue.use(MintUI)
// 引入圖片預覽外掛
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
Vue.use(photoPreview, {
  loop: false,
  fullscreenEl: false, //是否全屏
  arrowEl: false, //左右按鈕
})

// 引入地址路由
import router from './router'
import store from './vuex'

// 註冊全域性鉤子攔截登入狀態
const that = this
router.beforeEach((to, from, next) => {
    const token = store.state.token
    // 判斷該路由地址是否需要登入許可權
    if(to.meta.requireAuth){
        // 通過vuex state獲取當前token是否存在
        if(token){
            next()
        }else{
            // console.log('還未登入授權！')
            next()
            wcPop({
                content: '還未登入授權！', style: 'background:#e03b30;color:#fff;', time: 2,
                end: function(){
                    next({ path: '/login' })
                }
            });
        }
    }else{
        next()
    }
})

export default router

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: window.sessionStorage.getItem('user'),
        token: window.sessionStorage.getItem('token')
    },
    mutations: {
        // 將token儲存到sessionStorage
        SET_TOKEN (state, data){
            state.token = data;
            window.sessionStorage.setItem('token', data);
        },
        // 獲取使用者名稱
        SET_USER (state, data){
            state.user = data;
            window.sessionStorage.setItem('user', data);
        },
        // 退出
        LOGOUT (state){
            state.user = null;
            state.token = null;
            window.sessionStorage.removeItem('user');
            window.sessionStorage.removeItem('token');
        }
    },
    getters:{}
})