基于vue和muse-ui打造移动端的聊天webapp

ichat-frontend

ichat
是一款基于muse-ui和vue.js的移动端聊天应用,融合了单聊和群聊等功能.

源码地址:https://github.com/zhengze/ichat-frontend

预览

注册

基于vue和muse-ui打造移动端的聊天webapp

登录

基于vue和muse-ui打造移动端的聊天webapp

消息

基于vue和muse-ui打造移动端的聊天webapp

好友

基于vue和muse-ui打造移动端的聊天webapp

群组

基于vue和muse-ui打造移动端的聊天webapp

聊天

基于vue和muse-ui打造移动端的聊天webapp

功能

  •  注册/登录功能
  •  聊天功能
  •  查看历史记录
  •  群聊
  •  单聊
  •  好友列表
  •  群组列表(我创建的群/我加入的群)
  •  加好友
  •  创建群
  •  加入群

依赖包

  • vue
  • vue-socket.io
  • muse-ui
  • vue-router
  • vuex
  • axios

安装

$npm install

运行

$npm run serve
或者
$npm run development

打包

npm run build

配置

.env.xxx

VUE_APP_BASE_API=http://192.168.1.6:5050
NODE_ENV=development

VUE_APP_BASE_API 后端API NODE_ENV 开发模式

vue.config.js

module.exports = {
  devServer: {
    proxy: {
        ‘/socket.io‘: {
          target: ‘http://192.168.37.120:5050‘,
          ws: true,
          changeOrigin: true
        },
        ‘sockjs-node‘: {
          target: ‘http://192.168.37.120:5050‘,
          ws: false,
          changeOrigin: true
        },
    }

  }
}

proxy 为代理配置项,修改target为socket server位置
vue.config.js配置详情请看https://cli.vuejs.org/zh/config/#vue-config-js

联系方式

qq群:88606218

issues: https://github.com/zhengze/ichat-frontend/issues

基于vue和muse-ui打造移动端的聊天webapp

上一篇:Android简易版图书管理系统


下一篇:IDEA 创建 MAPPER 模板