基于Vue2.5.6 + Vuex + vue-cli + vue-router + vue-gemini-scrollbar +偷窃者+ elementUI等技术混合架构开发的仿微信网页端聊天室——vueWebChat,实现了发送消息,表情(动图),图片,视频预览,右键菜单,截屏,截图可直接粘贴至文本框进行发送。
& # 8226; MVVM框架:Vue2.5.6
& # 8226;状态管理:Vuex
& # 8226;页面路由:Vue-router
& # 8226;iconfont图标:阿里巴巴字体图标库
& # 8226;自定义滚动条:vue-gemini-scrollbar
& # 8226;弹窗组件:element-ui(饿了么前端UI库)
& # 8226;环境配置:节点。js + cnpm + webpack
& # 8226;高德地图:vue-amap
& # 8226;图片预览:vue-photo-preview
◆点击右上角最大化按钮,可以进行全屏切换
◆引入公共及全局组件配置components.js
/*
引入公共及全局组件配置
*///引入侧边栏及联系人
从“进口winBar。/组件/winBar '
从’。/组件/导入栏栏”
从“进口recordList。/组件/recordList '
从“进口contactList。/组件/接触'//引入jquery
从“jquery”进口美元//引入wcPop弹窗插件
从“进口wcPop。/资产/js/wcPop/wcPop '
进口的。/资产/js/wcPop/皮/wcPop.css”//引入饿了么pc端UI库
从“element-ui”进口elementUI
导入“element-ui/lib/theme-chalk/index.css”//引入图片预览插件
从“vue-photo-preview”进口photoPreview
进口的vue-photo-preview/dist/每次//引入自定义滚动条插件
从“vue-gemini-scrollbar”进口geminiScrollbar//引入加载更多插件
从“vue-infinite-scroll”进口infiniteLoading//引入高德地图
从“vue-amap”进口vueAMap
const安装=Vue=比;{//注册组件
Vue.component (win-bar, winBar)
Vue.component(“兼职”,侧栏)
Vue.component(记录列表,recordList)
Vue.component(“通讯录”,contactList)//应用实例
Vue.use (elementUI)
Vue。使用(photoPreview, {
循环:假的,
fullscreenEl:真的,//是否全屏
arrowEl:真的,//左右按钮
});
Vue.use (geminiScrollbar)
Vue.use (infiniteLoading)
Vue.use (vueAMap)
vueAMap.initAMapApiLoader ({
关键:“e1dedc6bdd765d46693986ff7ff969f4”,
插件:[
”同理。自动完成”,//输入提示插件
”同理。PlaceSearch ",//POI搜索插件
”同理。规模”,//右下角缩略图插件比例尺
”同理。概述”,//地图鹰眼插件
”同理。工具栏",//地图工具条
”同理。MapType ",//类别切换控件,实现默认图层与卫星图,实施交通图层之间切换的控制
”同理。PolyEditor ",//编辑折线多,边形
”同理。CircleEditor ",//圆形编辑器插件
”同理。地理位置”//定位控件,用来获取和展示用户主机所在的经纬度位置
),
uiVersion:“1.0”
});
}
出口默认安装
