最近一段時間一直在學習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<!--登入/註冊模板-->
<template>
<div class="wcim__lgregWrapper flexbox flex__direction-column">
<div class="wcim__lgregHeader flex1">
<div class="slogan">
<div class="logo"><img src="src/assets/img/uimg/u__qun-vue.png" /></div>
<h2>歡迎使用Vue-webChat</h2>
</div>
<div class="forms">
<form @submit.prevent="handleSubmit">
<ul class="clearfix">
<li class="flexbox flex-alignc"><i class="iconfont icon-shouji"></i><input class="iptxt flex1" type="tel" v-model="formObj.tel" name="tel" placeholder="請輸入手機號" autocomplete="off" maxlength="11" /><em class="borLine"></em></li>
<li class="flexbox flex-alignc"><i class="iconfont icon-pass"></i><input class="iptxt flex1" type="password" v-model="formObj.pwd" name="pwd" placeholder="請輸入密碼" autocomplete="off" /><em class="borLine"></em></li>
</ul>
<div class="btns"><button class="wc__btn-primary btn__login" type="submit">登入</button></div>
<div class="lgregLink align-c clearfix">
<router-link to="#" tag="a">忘記密碼</router-link>
<router-link to="/register" tag="a">註冊使用者</router-link>
</div>
</form>
</div>
</div>
<div class="wcim__lgregFooter">
<p class="version">vue網頁端聊天室 ▪ vueWebChat v1.0</p>
</div>
</div>
</template>
<script>
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('/');
}
});
}
}
}
}
</script>
<style>
</style>