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那边，毕竟是第一接触的东西因此须要摸索一下，但愿文章会对你有所帮助