最近一段时间一直在学习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'

// 引入全局组件

// 方式一：

// Vue.component('headerBar', resolve => require(['./common/header'], resolve))

// Vue.component('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

https://www.cnblogs.com/xiaoyan2017

*/

// 引入侧边栏及联系人

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 => {

// 注册组件

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

/*

* 页面地址路由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

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.$store.commit('SET_TOKEN', setToken());

this.$store.commit('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)