vue聊天IM实例|vue全家桶仿微信
一、项目简介
基于Vue2.x全家桶技术Vue2.5.6+Vuex+vue-router+webpack+vuePhotoPreview+wcPop等技术架构开发的仿微信界面聊天室vue-chatroom实例，实现了微信聊天下拉刷新、发送消息、表情(动图)，图片、视频预览，打赏、红包等功能。
二、技术栈
MVVM框架：Vue2.x
状态管理：Vuex
页面路由：Vue-router
弹窗插件：wcPop
打包工具：webpack 2.0
环境配置：node.js + cnpm
图片插件：vue-photo-preview
vue自定义导航栏/底部Tabbar模板
<!--顶部模板-->
<template>
<div class="wcim__topBar" v-show="$route.meta.showHeader">
<div class="inner flexbox flex-alignc">
<!-- <a class="linkico wcim__ripple-fff" href="javascript:;" @click="$router.back(-1)"><i class="iconfont icon-back"></i></a> -->
<h4 class="barTxt flex1">
<div class="barCell flexbox flex__direction-column"><em class="clamp1">Vue聊天室</em></div>
</h4>
<span class="linkico wcim__ripple-fff"><i class="iconfont icon-search"></i></span>
</div>
</div>
</template>
<!--底部tabBar模板-->
<template>
<div class="wcim__tabBar" v-show="$route.meta.showTabBar">
<div class="bottomfixed wcim__borT">
<ul class="flexbox flex-alignc">
<router-link class="flex1" active-class="on" tag="li" to="/" exact><span class="ico"><i class="iconfont icon-tabbar_xiaoxi"></i><em class="wcim__badge">15</em></span><span class="txt">消息</span></router-link>
<router-link class="flex1" active-class="on" tag="li" to="/contact"><span class="ico"><i class="iconfont icon-tabbar_tongxunlu"></i></span><span class="txt">通讯录</span></router-link>
<router-link class="flex1" active-class="on" tag="li" to="/ucenter"><span class="ico"><i class="iconfont icon-tabbar_wo"></i></span><span class="txt">我</span></router-link>
</ul>
</div>
</div>
</template>
vue页面地址路由/登录验证拦截
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),
},
// ...
]
})
/*
@desc 注册全局钩子拦截登录状态
@about Q：282310962
*/
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()
}
})
vue表单验证模块
import { setToken, checkTel } from '../../utils/filters'
export default {
data () {
return {
formObj: {},
vcodeText: '获取验证码',
tel: '',
disabled: false,
time: 0,
}
},
methods: {
handleSubmit(){
var that = this;
if(!this.formObj.tel){
wcPop({ content: '手机号不能为空！', style: 'background:#e03b30;color:#fff;', time: 2 });
}
//...
},
// 60s倒计时
handleVcode(){
if(!this.formObj.tel){
wcPop({ content: '手机号不能为空！', style: 'background:#e03b30;color:#fff;', time: 2 });
}else if(!checkTel(this.formObj.tel)){
wcPop({ content: '手机号格式不正确！', style: 'background:#e03b30;color:#fff;', time: 2 });
}else{
this.time = 60;
this.disabled = true;
this.countDown();
}
},
countDown(){
if(this.time > 0){
this.time--;
this.vcodeText = '获取验证码('+this.time+')';
setTimeout(this.countDown, 1000);
}else{
this.time = 0;
this.vcodeText = '获取验证码';
this.disabled = false;
}
}
}
}
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'
ok 今天就分享到这里，希望能喜欢，如果对h5开发聊天感兴趣可以看下面这篇，同时也可以关注前端公众号了解更多前端项目实例开发。
