最近一段时间一直在学习vue框架，对比了下react和angular发现vue上手快多了，之前有使用vue开发个vue版仿微信手机端IM聊天，最近想继续加强学习下，就做了一版网页端的vue聊天室。
依然是基于vue全家桶技术实现开发的，新增的右键菜单及弹窗均是自己开发的插件。
/*
* 主页面js
*/
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './vuex'
// 引入公共Js
import './common.js'
// 引入全局组件
// 方式一：
// ponent('headerBar', resolve => require(['./common/header'], resolve))
// ponent('tab-bar', resolve => require(['./common/footer'], resolve))
// 方式二：
import _g_component from './components.js'
Vue.use(_g_component)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
/*
引入公共及全局组件配置
Q：282310962
/xiaoyan
*/
// 引入侧边栏及联系人
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'
// 引入饿了么pc端UI库
import elementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
// 引入图片预览插件
import photoPreview from 'vue-photo-preview'
import 'vue-photo-preview/dist/skin.css'
// 引入自定义滚动条插件
import geminiScrollbar from 'vue-gemini-scrollbar'
// 引入加载更多插件
import infiniteLoading from 'vue-infinite-scroll'
// 引入高德地图
import vueAMap from 'vue-amap'
const install = Vue => {
// 注册组件
ponent('win-bar', winBar)
ponent('side-bar', sideBar)
ponent('record-list', recordList)
ponent('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
/*
* 页面地址路由js
*/
import Vue from 'vue'
import Router from 'vue-router'
import store from '../vuex'
// 通过改写router.go方法，当new Router 实例就包含back方法
Router.prototype.back = function(){
window.history.go(-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: '/',
redirect: '/chat',
component: resolve => require(['../views/index'], resolve),
meta: { requireAuth: true },
},
{
path: '/contact',
redirect: '/contact/new-friends',
component: resolve => require(['../views/contact'], resolve),
meta: { requireAuth: true },
},
...
]
});
// 注册全局钩子(拦截登录状态)
router.beforeEach((to, from, next) => {
const token = store.state.token
// 判断该路由地址是否需要登录权限
if(to.meta.requireAuth){
// 判断token是否存在
if(token){
next()
}else{
next()
// 未登录授权
wcPop({
content: '还未登录授权！', anim: 'shake', style: 'background:#e03b30;color:#fff;', time: 2,
end: function(){
next({ path: '/login' })
}
});
}
}else{
next()
}
})
export default router
欢迎使用Vue-webChat
登录忘记密码
注册用户
vue网页端聊天室 ▪ vueWebChat v1.0
import { setToken, checkTel } from '../../utils/filters'
export default {
data () {
return {
formObj: {}
}
},
methods: {
handleSubmit(){
// console.log(this.formObj)
// console.log(JSON.stringify(this.formObj))
var that = this;
if(!this.formObj.tel){
wcPop({ content: '手机号不能为空！', style: 'background:#e03b30;color:#fff;', time: 2 });
}else if(!checkTel(this.formObj.tel)){
wcPop({ content: '手机号格式不正确！', style: 'background:#e03b30;color:#fff;', time: 2 });
}else if(!this.formObj.pwd){
wcPop({ content: '密码不能为空！', style: 'background:#e03b30;color:#fff;', time: 2 });
}else{
this.$mit('SET_TOKEN', setToken());
this.$mit('SET_USER', this.formObj.tel);
wcPop({
content: '登录成功，跳转中...', style: 'background:#41b883;color:#fff;', time: 2, shadeClose: false,
end: function(){
that.$router.push('/');
}
});
}
}
}
}
本作品采用《CC 协议》，转载必须注明作者和本文链接
本文为原创文章，未经作者允许，欢迎大家一起交流 QQ(282310962) wx(xy190310)
