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

這個(gè)項(xiàng)目是利用工作之余寫的一個(gè)模仿微信app的單頁面應(yīng)用，整個(gè)項(xiàng)目包含27個(gè)頁面，涉及實(shí)時(shí)群聊，機(jī)器人聊天，同學(xué)錄，朋友圈等等，后續(xù)頁面還是開發(fā)中。寫這個(gè)項(xiàng)目主要目的是練習(xí)和熟悉vue和vuex的配合使用，利用socket.io實(shí)現(xiàn)實(shí)時(shí)聊天。

vue2+vue-router+webpack+vuex+sass+svg構(gòu)圖+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 (訪問本地，運(yùn)行后訪問 http://localhost:8882)

項(xiàng)目演示請(qǐng)點(diǎn)擊這里 （請(qǐng)用chrome手機(jī)模式預(yù)覽）

本項(xiàng)目主要用于熟悉vue2+vuex的用法
如有問題請(qǐng)直接在Issues中提出，或加qq：812571880
如果覺得對(duì)您學(xué)習(xí)vue有點(diǎn)點(diǎn)幫助，請(qǐng)右上角star一下吧   ^_^

[x] 微信

[x] 通訊錄

[x] 發(fā)現(xiàn)

[x] 我

[x] 設(shè)置

[x] 新消息提醒

[x] 勿擾模式

[x] 聊天

[x] widows 微信已登錄

[x] 搜索頁

[x] 對(duì)話頁

[x] 對(duì)話功能

[x] 單人機(jī)器人智能對(duì)話頁

[x] 群聊

[x] 朋友圈

[x] 朋友圈點(diǎn)贊、評(píng)論

[x] 個(gè)人中心

[x] 詳細(xì)資料

[x] 更多

[x] 個(gè)人相冊(cè)

[x] 更多

[x] 收藏

[x] 我的錢包

[x] 購物

[x] 設(shè)置

[x] 登錄

├── README.md                                    // webpack配置文件
├── build                                        // 項(xiàng)目打包路徑
├── config                                       // 上線項(xiàng)目文件，放在服務(wù)器即可正常訪問
│?? └── index.js
├── favicon.ico
├── index.html
├── package.json
├── printscreen
├── src                                          // 源碼目錄
│?? ├── App.vue                                  // 頁面入口文件
│?? ├── components                               // 公共組件
│?? │?? ├── findandMe
│?? │?? │?? └── findandMe.vue                    // 發(fā)現(xiàn)和我共同的模塊的列表
│?? │?? ├── footer
│?? │?? │?? └── foot.vue                         // 底部微信導(dǎo)航
│?? │?? └── header
│?? │??     └── head.vue                         // 頭部公共組件
│?? ├── config                                   // 基本配置
│?? │?? ├── env.js                               // 環(huán)境切換配置
│?? │?? ├── fetch.js                             // 獲取數(shù)據(jù)
│?? │?? ├── iscroll.js 
│?? │?? ├── mUtils.js                            // 工具
│?? │?? ├── rem.js                               // px轉(zhuǎn)換rem
│?? │?? ├── swiper.min.js                        // 輪播圖控件
│?? │?? └── uploadPreview.js                     // 上傳圖片控件
│?? ├── frames
│?? │?? ├── addressbook
│?? │?? │?? ├── addressbook.vue                  // 通訊錄
│?? │?? │?? └── details
│?? │?? │??     ├── details.vue                  // 詳細(xì)資料
│?? │?? │??     └── more
│?? │?? │??         └── more.vue                 // 更多
│?? │?? ├── computer
│?? │?? │?? └── computer.vue                     // pc端登錄
│?? │?? ├── conversation
│?? │?? │?? ├── chatmessage
│?? │?? │?? │?? ├── chatmessage.vue              // 單人聊天信息
│?? │?? │?? │?? └── groupchatmessage.vue         // 群聊聊天信息
│?? │?? │?? ├── groupchat.vue                    // 群聊
│?? │?? │?? └── singlechat.vue                   // 單人對(duì)話
│?? │?? ├── dialogue
│?? │?? │?? └── dialogue.vue                     // 微信首頁(對(duì)話列表頁)
│?? │?? ├── find
│?? │?? │?? ├── find.vue                         // 發(fā)現(xiàn)
│?? │?? │?? ├── friendcircle
│?? │?? │?? │?? └── friendcircle.vue             // 朋友圈
│?? │?? │?? └── miniapps
│?? │?? │??     └── miniapps.vue                 // 小程序子頁面
│?? │?? ├── me
│?? │?? │?? ├── cardbag
│?? │?? │?? │?? └── cardbag.vue                  // 卡包
│?? │?? │?? ├── collect
│?? │?? │?? │?? └── collect.vue                  // 我的收藏
│?? │?? │?? ├── me.vue
│?? │?? │?? ├── personaldetails
│?? │?? │?? │?? └── personaldetails.vue          // 個(gè)人信息
│?? │?? │?? ├── photoalbum
│?? │?? │?? │?? └── photoalbum.vue               // 我的相冊(cè)
│?? │?? │?? ├── settings
│?? │?? │?? │?? ├── detailset
│?? │?? │?? │?? │?? ├── aboutwc.vue              // 關(guān)于微信
│?? │?? │?? │?? │?? ├── chat.vue                 // 聊天
│?? │?? │?? │?? │?? ├── currency.vue             // 通用
│?? │?? │?? │?? │?? ├── disturbance.vue          // 勿擾模式
│?? │?? │?? │?? │?? ├── help.vue                 // 幫助與反饋
│?? │?? │?? │?? │?? ├── login.vue                // 登錄
│?? │?? │?? │?? │?? ├── newmessage.vue           // 新消息提醒
│?? │?? │?? │?? │?? └── privacy.vue              // 隱私
│?? │?? │?? │?? └── settings.vue                 // 設(shè)置
│?? │?? │?? └── wallet
│?? │?? │??     └── wallet.vue                   // 我的錢包
│?? │?? ├── search
│?? │?? │?? └── search.vue                       // 搜索
│?? │?? └── transfer
│?? │??     └── transfer.vue
│?? ├── images
│?? ├── main.js                                  // 程序入口文件，加載各種公共組件
│?? ├── router
│?? │?? └── router.js                           // 所有頁面路由控制中心
│?? ├── service
│?? │?? ├── data
│?? │?? │?? ├── album.js                        // 個(gè)人相冊(cè)
│?? │?? │?? ├── burse.js                        // 錢包數(shù)據(jù)
│?? │?? │?? ├── chatmore.js
│?? │?? │?? ├── collect.js                     // 我的收藏
│?? │?? │?? ├── contacts.js                    // 聯(lián)系人列表數(shù)據(jù)
│?? │?? │?? ├── dialoglist.js                  // 對(duì)話列表
│?? │?? │?? ├── friendcircle.js                // 朋友圈數(shù)據(jù)
│?? │?? │?? ├── groupchat.js                   // 群聊數(shù)據(jù)
│?? │?? │?? ├── login.js                       // 個(gè)人用戶信息
│?? │?? │?? ├── search.js                      // 搜索的分類
│?? │?? │?? └── userword.js
│?? │?? └── getData.js                         // 數(shù)據(jù)交互統(tǒng)一調(diào)配
│?? ├── 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