微言聊天室是基于前后端分离，采用SpringBoot+Vue开发的网页版聊天室。这是项目的前端vue工程源码.zip

# 项目介绍 微言聊天室基于前后端分离，项目采用 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的环境配置与全局方法封装](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/1.前端Vue的环境配置与全局方法封装) - [2.聊天页面组件引入与环境配置](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/2.聊天页面组件引入与环境配置) - [3.使用websocket实现群聊](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/3.使用websocket实现群聊) - [ 4.解决页面刷新vuex的state清空问题](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/4.解决页面刷新vuex的state清空问题) - [5.重启服务器自动跳转到登陆页](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/5.重启服务器自动跳转到登陆页) - [6.修改elementui的el-popover弹框的样式](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/6.修改elementui的el-popover弹框的样式) - [7.emoji表情发送](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/7.emoji表情发送) - [8.vue前端遇到的问题](https://github.com/JustCoding-Hai/subtlechat-vue/wiki/8.vue前端遇到的问题) ## 参考 https://github.com/is-liyiwei/vue-Chat-demo ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/).