项目介绍

微言聊天室基于前后端分离，项目采用 SpringBoot+Vue 开发，当前项目是系统的Vue前端SPA工程

项目预览地址：http://www.javahai.top/index.html

前端工程源码地址：https://github.com/JustCoding-Hai/subtlechat-vue

后端工程源码地址：https://github.com/JustCoding-Hai/subtlechat

前端技术栈

1. Vue
2. ElementUI
3. axios
4. vue-router
5. Vuex
6. WebSocket
7. vue-cli4

Project setup

npm install

环境配置

指定包下载

#安装element-ui
npm i element-ui -S  
#安装axios
npm install axios
#安装vuex
npm install vuex --save
#安装font-awesome
npm install --save font-awesome
#安装sass
npm install sass-loader --save-dev
cnpm install node-sass --save-dev

Compiles and hot-reloads for development 运行项目

npm run serve

Compiles and minifies for production打包项目

npm run build

文档

• 1.前端Vue的环境配置与全局方法封装
• 2.聊天页面组件引入与环境配置
• 3.使用websocket实现群聊
• 4.解决页面刷新vuex的state清空问题
• 5.重启服务器自动跳转到登陆页
• 6.修改elementui的el-popover弹框的样式
• 7.emoji表情发送
• 8.vue前端遇到的问题

参考

https://github.com/is-liyiwei/vue-Chat-demo

Customize configuration

See Configuration Reference.