Vue.js的實時聊天應用+netlify自動部署

簡介

項目是跟着sitepoint開發的一個Vue.js的實時聊天應用，核心chatkit，使用netlify進行自動部署.源碼vuechat, 可在pigchat體驗，帳號 test,test2

技術棧

• Vue
• Vuex
• Vue Router
• Pusher ChatKit
• SCSS
• ElementUI

chatkit

項目的核心就是經過chatkit開發的，能實時的反映用戶的在線狀態、發送的消息、哪些用戶正在輸入，均可以看看官網提供的實例

vue

vue的話用的是vue-cli3.0建立的，若是沒有更新的話

npm install -g @vue/cli
//建立
vue create vue-chatkit
//或者使用可視化界面建立
vue ui
複製代碼

我常選的是這些

固然能夠按本身喜歡的本身選擇

vuexLocal

由於項目的數據基本都是存在vuex裏的，因此在刷新的時候會丟失， 這個插件就是在刷新以前先把vuex存在本地的localstorage裏

ElementUI

原bo用的是bootstrap-vue，我用的是element

//安裝
yarn add element-ui / npm i element-ui
//導入 main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);
複製代碼

預覽

大致上就兩個頁面，電腦看會感受很空，手機看還好，若是須要擴展，能夠根據本身的需求進行擴展

項目流程

先去chatkit官網註冊一下，成功之後先建立一個chatkit

而後選擇剛剛建立的實例再建立用戶和房間

注意這裏的User Identifier，這是登錄時須要提供的，下面的就是暱稱

而後比較關鍵的是INSTANCE_LOCATOR和TOKEN_URL

url是須要點擊一下這裏而後把它下面顯示的連接整個複製出來

到這裏前期的配置都完成了，最後就是進行代碼的編寫了

附加netlify的部署

直接去netlify用github登錄，而後選擇你要部署的項目

更名字 在site settings裏能夠看到change site name
netlify部署的好處在於不用本身打包，並且在你每次代碼更新到git之後它會自動幫你更新部署

最後

總體代碼的編寫並不難，基本上就是在對vuex進行操做，因此整個流程走下來會對vuex運用的更熟練，難的可能就在於chatkit那邊，畢竟是第一接觸的東西因此須要摸索一下，但願文章會對你有所幫助