图片压缩
百亿站点
基于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引入
/*
- 主页面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>
