摘要：前言這個項目是利用工作之余寫的一個模仿微信的單頁面應用，整個項目包含個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續(xù)頁面還是開發(fā)中。

這個項目是利用工作之余寫的一個模仿微信app的單頁面應用，整個項目包含27個頁面，涉及實時群聊，機器人聊天，同學錄，朋友圈等等，后續(xù)頁面還是開發(fā)中。寫這個項目主要目的是練習和熟悉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的用法
如有問題請直接在Issues中提出，或加qq：812571880
如果覺得對您學習vue有點點幫助，請右上角star一下吧   ^_^

[x] 微信

[x] 通訊錄

[x] 發(fā)現

[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                    // 發(fā)現和我共同的模塊的列表
│?? │?? ├── footer
│?? │?? │?? └── foot.vue                         // 底部微信導航
│?? │?? └── header
│?? │??     └── head.vue                         // 頭部公共組件
│?? ├── config                                   // 基本配置
│?? │?? ├── env.js                               // 環(huán)境切換配置
│?? │?? ├── 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                         // 發(fā)現
│?? │?? │?? ├── 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的狀態(tài)管理
│??     ├── action.js                          // 配置根actions
│??     ├── index.js                           // 引用vuex，創(chuàng)建store
│??     ├── mutation-types.js                  // 定義常量muations名
│??     └── mutation.js                        // 配置根mutations
└── tree.md

36 directories, 133 files