Vue2 全家桶仿微信App 項目，支持多人在線聊天和機器人聊天

時間 2019-11-13

標籤 vue2 vue 全家微信 app 項目支持多人在線聊天機器人欄目應用數學简体版

原文原文鏈接

前言

這個項目是利用工做之餘寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時羣聊，機器人聊天，同窗錄，朋友圈等等，後續頁面仍是開發中。寫這個項目主要目的是練習和熟悉vue和vuex的配合使用，利用socket.io實現實時聊天。css

技術棧

vue2+vue-router+webpack+vuex+sass+svg構圖+es6/7

源碼地址

源碼地址：https://github.com/bailichen/vue-weixinhtml

項目運行

git clone https://github.com/bailichen/vue-weixin.git

cd vue-weixin

npm install

npm run dev (訪問本地，運行後訪問 http://localhost:8882)

效果演示

項目演示請點擊這裏（請用chrome手機模式預覽）vue

移動端掃描下方二維碼

說明

本項目主要用於熟悉vue2+vuex的用法webpack

若有問題請直接在Issues中提出，或加qq：812571880git

若是以爲對您學習vue有點點幫助，請右上角star一下吧 ^_^es6

目標功能

[x] 微信
[x] 通信錄
[x] 發現
[x] 我
[x] 設置
[x] 新消息提醒
[x] 勿擾模式
[x] 聊天
[x] widows 微信已登陸
[x] 搜索頁
[x] 對話頁
[x] 對話功能
[x] 單人機器人智能對話頁
[x] 羣聊
[x] 朋友圈
[x] 朋友圈點贊、評論
[x] 我的中心
[x] 詳細資料
[x] 更多
[x] 我的相冊
[x] 更多
[x] 收藏
[x] 個人錢包
[x] 購物
[x] 設置
[x] 登陸

頁面部分截圖

單人聊天

羣聊

朋友圈

項目佈局

├── README.md                                    // webpack配置文件
├── build                                        // 項目打包路徑
├── config                                       // 上線項目文件，放在服務器便可正常訪問
│   └── index.js
├── favicon.ico
├── index.html
├── package.json
├── printscreen
├── src                                          // 源碼目錄
│   ├── App.vue                                  // 頁面入口文件
│   ├── components                               // 公共組件
│   │   ├── findandMe
│   │   │   └── findandMe.vue                    // 發現和我共同的模塊的列表
│   │   ├── footer
│   │   │   └── foot.vue                         // 底部微信導航
│   │   └── header
│   │       └── head.vue                         // 頭部公共組件
│   ├── config                                   // 基本配置
│   │   ├── env.js                               // 環境切換配置
│   │   ├── fetch.js                             // 獲取數據
│   │   ├── iscroll.js 
│   │   ├── mUtils.js                            // 工具
│   │   ├── rem.js                               // px轉換rem
│   │   ├── swiper.min.js                        // 輪播圖控件
│   │   └── uploadPreview.js                     // 上傳圖片控件
│   ├── frames
│   │   ├── addressbook
│   │   │   ├── addressbook.vue                  // 通信錄
│   │   │   └── details
│   │   │       ├── details.vue                  // 詳細資料
│   │   │       └── more
│   │   │           └── more.vue                 // 更多
│   │   ├── computer
│   │   │   └── computer.vue                     // pc端登陸
│   │   ├── conversation
│   │   │   ├── chatmessage
│   │   │   │   ├── chatmessage.vue              // 單人聊天信息
│   │   │   │   └── groupchatmessage.vue         // 羣聊聊天信息
│   │   │   ├── groupchat.vue                    // 羣聊
│   │   │   └── singlechat.vue                   // 單人對話
│   │   ├── dialogue
│   │   │   └── dialogue.vue                     // 微信首頁(對話列表頁)
│   │   ├── find
│   │   │   ├── find.vue                         // 發現
│   │   │   ├── friendcircle
│   │   │   │   └── friendcircle.vue             // 朋友圈
│   │   │   └── miniapps
│   │   │       └── miniapps.vue                 // 小程序子頁面
│   │   ├── me
│   │   │   ├── cardbag
│   │   │   │   └── cardbag.vue                  // 卡包
│   │   │   ├── collect
│   │   │   │   └── collect.vue                  // 個人收藏
│   │   │   ├── me.vue
│   │   │   ├── personaldetails
│   │   │   │   └── personaldetails.vue          // 我的信息
│   │   │   ├── photoalbum
│   │   │   │   └── photoalbum.vue               // 個人相冊
│   │   │   ├── settings
│   │   │   │   ├── detailset
│   │   │   │   │   ├── aboutwc.vue              // 關於微信
│   │   │   │   │   ├── chat.vue                 // 聊天
│   │   │   │   │   ├── currency.vue             // 通用
│   │   │   │   │   ├── disturbance.vue          // 勿擾模式
│   │   │   │   │   ├── help.vue                 // 幫助與反饋
│   │   │   │   │   ├── login.vue                // 登陸
│   │   │   │   │   ├── newmessage.vue           // 新消息提醒
│   │   │   │   │   └── privacy.vue              // 隱私
│   │   │   │   └── settings.vue                 // 設置
│   │   │   └── wallet
│   │   │       └── wallet.vue                   // 個人錢包
│   │   ├── search
│   │   │   └── search.vue                       // 搜索
│   │   └── transfer
│   │       └── transfer.vue
│   ├── images
│   ├── main.js                                  // 程序入口文件，加載各類公共組件
│   ├── router
│   │   └── router.js                           // 全部頁面路由控制中心
│   ├── service
│   │   ├── data
│   │   │   ├── album.js                        // 我的相冊
│   │   │   ├── burse.js                        // 錢包數據
│   │   │   ├── chatmore.js
│   │   │   ├── collect.js                     // 個人收藏
│   │   │   ├── contacts.js                    // 聯繫人列表數據
│   │   │   ├── dialoglist.js                  // 對話列表
│   │   │   ├── friendcircle.js                // 朋友圈數據
│   │   │   ├── groupchat.js                   // 羣聊數據
│   │   │   ├── login.js                       // 我的用戶信息
│   │   │   ├── search.js                      // 搜索的分類
│   │   │   └── userword.js
│   │   └── getData.js                         // 數據交互統一調配
│   ├── style
│   │   ├── public.scss                        // 公共樣式
│   │   └── swiper.min.css
│   └── vuex                                   // vuex的狀態管理
│       ├── action.js                          // 配置根actions
│       ├── index.js                           // 引用vuex，建立store
│       ├── mutation-types.js                  // 定義常量muations名
│       └── mutation.js                        // 配置根mutations
└── tree.md

36 directories, 133 files