vue.js聊天例項|仿微信聊天室vue版

一、專案簡介

基於Vue2.0+Vuex+vue-router+webpack2.0+es6+vuePhotoPreview+wcPop等技術架構開發的仿微信介面聊天室——vueChatRoom，實現了微信聊天下拉重新整理、傳送訊息、表情(動圖)，圖片、視訊預覽，打賞、紅包等功能。

https://www.cnblogs.com/xiaoyan2017/p/10657781.html

二、技術棧

• MVVM框架：Vue.js 2.0
• 狀態管理：Vuex
• 頁面路由：Vue-router
• 彈窗外掛：wcPop
• 打包工具：webpack 2.0
• 環境配置：node.js + cnpm
• 圖片外掛：vue-photo-preview

``` /* * 頁面地址路由js */ import Vue from 'vue' import _router from 'vue-router' import store from '../vuex'

Vue.use(_router) //應用路由

const router = new _router({ routes: [ // 登入、註冊 { path: '/login', component: resolve => require(['../views/auth/login'], resolve), }, { path: '/register', component: resolve => require(['../views/auth/register'], resolve), },

    // 首頁、通訊錄、我
    {
        path: '/',
        component: resolve => require(['../views/index'], resolve),
        meta: { showHeader: true, showTabBar: true, requireAuth: true }
    },
    {
        path: '/contact',
        component: resolve => require(['../views/contact'], resolve),
        meta: { showHeader: true, showTabBar: true, requireAuth: true },
    },
    {
        path: '/contact/uinfo',
        component: resolve => require(['../views/contact/uinfo'], resolve),
    },
    {
        path: '/ucenter',
        component: resolve => require(['../views/ucenter'], resolve),
        meta: { showHeader: true, showTabBar: true, requireAuth: true }
    },
    // 聊天頁面
    {
        path: '/chat/group-chat',
        component: resolve => require(['../views/chat/group-chat'], resolve),
        meta: { requireAuth: true }
    },
    {
        path: '/chat/single-chat',
        component: resolve => require(['../views/chat/single-chat'], resolve),
        meta: { requireAuth: true }
    },
    {
        path: '/chat/group-info',
        component: resolve => require(['../views/chat/group-info'], resolve),
        meta: { requireAuth: true }
    }

    // ...
]

})

// 註冊全域性鉤子攔截登入狀態 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 ```

``` // >>>引入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' ```