前言
這個項目是利用工作之余寫的一個模仿微信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的用法
如有問題請直接在Issues中提出，或加qq：812571880
如果覺得對您學習vue有點點幫助，請右上角star一下吧 _
目標功能
- [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