一、项目介绍
基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室——vueWebChat,实现了发送消息、表情(动图),图片、视频预览,右键菜单、截屏、截图可直接粘贴至文本框进行发送。
二、技术框架
- MVVM框架:Vue2.5.6
- 状态管理:Vuex
- 页面路由:Vue-router
- iconfont图标:阿里巴巴字体图标库
- 自定义滚动条:vue-gemini-scrollbar
- 弹窗组件:element-ui(饿了么前端UI库)
- 环境配置:node.js + cnpm + webpack
- 高德地图:vue-amap
- 图片预览:vue-photo-preview
◆ 点击右上角最大化按钮,可以进行全屏切换
◆ 引入公共及全局组件配置components.js
/* 引入公共及全局组件配置 */ // 引入侧边栏及联系人 import winBar from './components/winbar' import sideBar from './components/sidebar' import recordList from './components/recordList' import contactList from './components/contact' // 引入jquery import $ from 'jquery' // 引入wcPop弹窗插件 import wcPop from './assets/js/wcPop/wcPop' import './assets/js/wcPop/skin/wcPop.css' //