# subtlechat-vue

**Repository Path**: hello-piper/subtlechat-vue

## Basic Information

- **Project Name**: subtlechat-vue
- **Description**: 微言聊天室是基于前后端分离，采用SpringBoot+Vue开发的网页版聊天室。这是项目的前端vue工程源码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-07-13
- **Last Updated**: 2024-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 项目介绍
微言聊天室基于前后端分离，项目采用 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/).