前言
這個項目是利用工作之餘寫的一個模仿微信 app 的單頁面應用，整個項目包含 27 個頁面，涉及實時羣聊，機器人聊天，同學錄，朋友圈等等，後續頁面還是開發中。寫這個項目主要目的是練習和熟悉 vue 和 vuex 的配合使用，利用 socket.io 實現實時聊天。
技術棧
vue2+vue-router+webpack+vuex+sass+svg 構圖+es6/7
源碼地址
源碼地址：https://github.com/bailichen/vue-weixin
項目運行
git clone https://github.com/bailichen/vue-weixin.git
cd vue-weixin
npm install
npm run dev (訪問本地，運行後訪問 http://localhost:8882)
效果演示
項目演示請點擊這裏 （請用 chrome 手機模式預覽）
說明
本項目主要用於熟悉 vue2+vuex 的用法
目標功能
[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