vue 仿二手交易app_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

import headerBar from './components/header'

import tabBar from './components/footer'

export default {

name: 'app',

data () {

return {

isTopFixed: true

}

},

components: {

headerBar,

tabBar

}

}

/* 引入公共样式 */

@import './assets/fonts/iconfont.css';

@import './assets/css/reset.css';

@import './assets/css/layout.css';

/*主页面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:{}

})

本作品采用《CC 协议》，转载必须注明作者和本文链接

本文为原创文章，未经作者允许不得转载，欢迎大家一起交流 QQ(282310962) wx(xy190310)