介绍
基于vue 2 . x vuex vue-CLI vue-router element-ui swiper等技术，开发了微信PC端界面聊天应用程序，用于发送消息表情(图gif)、预览照片/视频、右键菜单、红包/
技术栈
- vue版本：Vue2.5.6
- 状态管理：Vuex
- 页面路由：Vue-router
- iconfont图标：阿里巴巴字体图标库
- 自定义滚动条：vue-gemini-scrollbar
- UI组件库：element-ui（饿了么UI库）
- 高德地图：vue-amap
- 图片预览：vue-photo-preview
预览演示
饿了么前端UI库
github地址
Element | 是一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库
- 安装
npm install element-ui -S- 使用
import Vue from 'vue'
import Element from 'element-ui'
Vue.use(Element)
// 按需引入
import {
Select,
Button
// ...
} from 'element-ui'
Vue.componen, Select)
Vue.componen, Button) vue引入公共/全局组件
/*
引入公共及全局组件配置
*/
// 引入侧边栏及联系人
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;
// 引入饿了么pc端UI库
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk;
// 引入图片预览插件
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/di;
// 引入自定义滚动条插件
import geminiScrollbar from 'vue-gemini-scrollbar'
// 引入加载更多插件
import infiniteLoading from 'vue-infinite-scroll'
// 引入高德地图
import vueAMap from 'vue-amap'
const install = Vue => {
// 注册组件
Vue.component('win-bar', winBar)
Vue.component('side-bar', sideBar)
Vue.component('record-list', recordList)
Vue.component('contact-list', contactList)
// 应用实例
Vue.use(elementUI)
Vue.use(photoPreview, {
loop: false,
fullscreenEl: true, //是否全屏
arrowEl: true, //左右按钮
});
Vue.use(geminiScrollbar)
Vue.use(infiniteLoading)
Vue.use(vueAMap)
vueAMap.initAMapApiLoader({
key: "e1dedc6bdd765d46693986ff7ff969f4",
plugin: [
"AMap.Autocomplete", //输入提示插件
"AMap.PlaceSearch", //POI搜索插件
"AMap.Scale", //右下角缩略图插件 比例尺
"AMap.OverView", //地图鹰眼插件
"AMap.ToolBar", //地图工具条
"AMap.MapType", //类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
"AMap.PolyEditor", //编辑 折线多，边形
"AMap.CircleEditor", //圆形编辑器插件
"AMap.Geolocation" //定位控件，用来获取和展示用户主机所在的经纬度位置
],
uiVersion: "1.0"
});
}
export default install效果图
vue主页面main.js配置
/*
* 主页面js
*/
import Vue from 'vue'
import App from '.;
import router from './router'
import store from './vuex'
// 引入公共Js
import '.;
// 引入全局组件
// 方式一：
// Vue.component('headerBar', resolve => require(['./common/header'], resolve))
// Vue.component('tab-bar', resolve => require(['./common/footer'], resolve))
// 方式二：
import _g_component from '.;
Vue.use(_g_component)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})a页面配置
- 页面主面板模板
<template>
<div id="app">
<div class="vchat-wrapper flexbox flex-alignc">
<div class="vChat-panel" style="background-image: url(src/assets/img/placeholder);">
<div class="vChat-inner flexbox">
<!-- //顶部按钮(最大、最小、关闭) -->
<win-bar></win-bar>
<!-- //侧边栏 -->
<side-bar v-if="!$rou;></side-bar>
<keep-alive>
<router-view class="flex1 flexbox"></router-view>
</keep-alive>
</div>
</div>
</div>
</div>
</template>- 引入css
<style>
/* 引入公共样式 */
@import './assets/fon;;
@import './assets/c;;
@import './assets/c;;
</style>vue页面路由配置
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'
// 通过改写rou方法，当new Router 实例就包含back方法
Rou = function(){
window.(-1)
}
Vue.use(Router)
const router = new Router({
routes: [
// 登录、注册
{
path: '/login',
component: resolve => require(['../views/auth/login'], resolve),
meta: { hideSideBar: true },
},
{
path: '/register',
component: resolve => require(['../views/auth/register'], resolve),
meta: { hideSideBar: true },
},
//...
// 聊天页面
{
path: '/chat',
component: resolve => require(['../views/chat/group-chat'], resolve),
meta: { requireAuth: true }
},
//...
]
});
export default routerrou和next实现路由拦截验证
// 注册全局钩子（拦截登录状态）
rou((to, from, next) => {
const token =
// 判断该路由地址是否需要登录权限
i){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})❤️ 最后
如果你觉得这篇文章对你有帮助，麻烦点个「关注/转发」，让更多的人也能看到你的分享！
