vue聊天IM實例|vue全家桶仿微信
一、項目簡介
基于Vue2.x全家桶技術(shù)Vue2.5.6+Vuex+vue-router+webpack+vuePhotoPreview+wcPop等技術(shù)架構(gòu)開發(fā)的仿微信界面聊天室vue-chatroom實例，實現(xiàn)了微信聊天下拉刷新、發(fā)送消息、表情(動圖)，圖片、視頻預(yù)覽，打賞、紅包等功能。
二、技術(shù)棧
MVVM框架：Vue2.x
狀態(tài)管理：Vuex
頁面路由：Vue-router
彈窗插件：wcPop
打包工具：webpack 2.0
環(huán)境配置：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) //應(yīng)用路由
const router = new _router({
? ? routes: [
? ? ? ? // 登錄、注冊
? ? ? ? {
? ? ? ? ? ? path: '/login',
? ? ? ? ? ? component: resolve => require(['../views/auth/login'], resolve),
? ? ? ? },
? ? ? ? {
? ? ? ? ? ? path: '/register',
? ? ? ? ? ? component: resolve => require(['../views/auth/register'], resolve),
? ? ? ? },
? ? ? ? // ...
? ? ]
})
/*?
@desc 注冊全局鉤子攔截登錄狀態(tài)????
@about? Q：282310962???
?*/
const that = this
router.beforeEach((to, from, next) => {
? ? const token = store.state.token
? ? // 判斷該路由地址是否需要登錄權(quán)限
? ? if(to.meta.requireAuth){
? ? ? ? // 通過vuex state獲取當前token是否存在
? ? ? ? if(token){
? ? ? ? ? ? next()
? ? ? ? }else{
? ? ? ? ? ? // console.log('還未登錄授權(quán)！')
? ? ? ? ? ? next()
? ? ? ? ? ? wcPop({
? ? ? ? ? ? ? ? content: '還未登錄授權(quán)！', 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)
// >>>引入圖片預(yù)覽插件
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開發(fā)聊天感興趣可以看下面這篇，同時也可以關(guān)注前端公眾號了解更多前端項目實例開發(fā)。
