一、項目簡介
基於Vue + Vuex + Vue-router + Webpack 2.0打造微信界面，實現了微信聊天、搜索、點贊、通訊錄（快速導航）、個人中心、模擬對話、朋友圈、設置等功能。
二、項目預覽 （請在chrome手機模式下打開）
移動端掃描下方二維碼可直接打開
三、技術棧
- MVVM框架：Vue.js 2.0
- 狀態管理：Vuex
- 移動端組件庫：Mint-ui
- 前端路由：Vue-router
- 數據交互：Vue-resource
- 打包工具：webpack 2.0
- 環境配置：node + npm
- 語言：es6
四、項目運行
git clone https://github.com/caochangkui/wechat-by-vue.git
cd wechat-by-vue
npm install
npm run dev //服務端運行，運行后訪問 http://localhost:6868)
npm run build //項目打包
五、頁面部分截圖
1. 微信聊天（每個聯系人聊天后可自動添加到首頁）
2.朋友圈、點贊
3.個人中心、相冊、錢包、卡包、設置
六、項目樹
.
├── README.md
├── build // 項目打包路徑
│ ├── build.js
│ ├── check-versions.js
│ ├── dev-client.js
│ ├── dev-server.js
│ ├── utils.js
│ ├── vue-loader.conf.js
│ ├── webpack.base.conf.js
│ ├── webpack.dev.conf.js
│ └── webpack.prod.conf.js
├── config // 上線項目文件
│ ├── dev.env.js
│ ├── index.js
│ └── prod.env.js
├── index.html
├── package.json // 配置信息
└── src // 源碼目錄
├── App.vue // 輸出文件
├── main.js // 入口文件
├── assets // 公用圖片
├── base // 存放通用組件的組件庫
│ ├── loading // 欄加載組件
│ └── scroll // 滑屏文件
├── components // 應用組件的組件庫
│ ├── chat
│ │ └── chat.vue // 微信組件
│ ├── address
│ │ └── address.vue // 通訊錄組件
│ │ └── address-detail
│ │ └── address-detail.vue // 通訊錄詳情組件
│ │ └── address-more
│ │ └── address-more.vue // 通訊錄更多詳情組件
│ ├── find
│ │ ├── find.vue // 發現組件
│ │ ├── find-circle
│ │ │ └── find-circle.vue // 朋友圈組件
│ │ ├── scan
│ │ │ └── scan.vue // 掃一掃組件
│ │ └── shake
│ │ └── shake.vue // 搖一搖組件
│ ├── me
│ │ ├── me.vue // 個人中心組件
│ │ ├── card
│ │ │ └── card.vue // 卡包組件
│ │ ├── money
│ │ │ └── money.vue // 錢包組件
│ │ ├── collection
│ │ │ └── collection.vue // 收藏組件
│ │ ├── album
│ │ │ └── album.vue // 相冊組件
│ │ └── set
│ │ └── set.vue // 設置組件
│ ├── chatroom
│ │ └── chatroom.vue // 聊天窗口組件
│ │ └── chatroom-user
│ │ └── chatroom-user.vue // 聊天者的個人信息組件
│ ├── search
│ │ └── search.vue // 搜索組件
│ ├── plus
│ │ └── plus.vue // 更多組件
├── router
│ └── index.js // 路由控制中心
└── store // 存放vuex相關代碼
├── actions.js // 異步操作，或對mutation做一些封裝
├── getters.js // 獲取state，並對其做一些映射
├── index.js // vuex入口文件
├── mutation-types.js // 存放與mutatiom相關的常量
├── mutations.js // 處理數據邏輯方法的集合
└── state.js // 管理所有狀態
👉 友情推薦
新開發的小程序，功能包括詩詞大全、成語接龍、百家姓、猜字謎、歇后語，歡迎掃碼預覽：
