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

前言

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

技術棧

cd vue-weixin

npm install

├── 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<code>`</code>