基于vue2.0+vue-cli+vuex+vue-router+webpack+es6+wcPop等技术开发的仿微信聊天界面|仿微信聊天室vue-chatRoom,实现了微信聊天功能,新增了消息下拉刷新,消息表情发送,图片、视频预览,打赏、红包等功能。
技术栈:
MVVM框架:Vue.js 2.0
状态管理:Vuex
页面路由:Vue-router
弹窗插件:wcPop
打包工具:webpack 2.0
环境配置:node.js + cnpm
图片插件:vue-photo-preview
效果截图:
主页面main.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'
复制代码
vue-router页面地址路由及登录拦截:
/*
* 页面地址路由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
主页面模板app.vue
<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>