基于 Vue + ElementUI 的微信客服前端项目

本项目主要为接入微信公众号，让客服与客户通过公众号直接对话而开发并开源的

效果图

在线体验

项目亮点

1. 界面高仿微信网页版
2. 支持发送文本（包含部分表情）和图片类消息
3. 支持接收微信支持的所有格式的消息类型和聊天有关的事件（如关注、取关、点击菜单等）
4. 开启 Mock 后可完全脱离后端完成所有功能的交互体验

技术栈

• Vue 框架
• Vuex
• Vue-router
• ElementUI
• Stompjs
• Sockjs
• Mockjs

代码规范

命名规则

1. .vue 文件名 大写驼峰
2. .js 文件名 小写横杠

异步请求

1. 异步请求一律使用 Promise 风格
2. 所有与后端交互的 api 都放在 src/api 目录中，
3. 所有 url 放于 api-path.js 文件，并做好分类
4. 每一类型的 api 有单独的 js 文件，每一个 url 对应一个方法，用于封装发送请求并处理结果的逻辑
5. api 中调用HttpUtil定义的方法发起请求
6. 需要发送请求的地方直接调用 api 的方法获取结果

Mock

1. mock 相关的文件全部放在 mock 目录下
2. 每个 xxx-api.js 文件对应一个 xxx-api-mock.js
3. 每个请求都要有相应的 Mock 拦截并返回数据

通用组件

与业务无关的通用组件放在 components/common 目录下

启动

1. 首次运行先执行 npm install
2. npm run dev
3. 浏览器打开 http://127.0.0.1:8080

参考

本项目部分样式及表情基于 Vue-chat 项目改造而来，该项目仿微信页面做得非常细致。

Buy me a coffee