简介
项目是跟着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那边,毕竟是第一接触的东西所以需要摸索一下,希望文章会对你有所帮助