基於Vue.js 2.0 + Vuex打造微信項目

1、項目簡介

基於Vue + Vuex + Vue-router + Webpack 2.0打造微信界面，實現了微信聊天、搜索、點贊、通信錄（快速導航）、我的中心、模擬對話、朋友圈、設置等功能。

2、項目預覽 （請在chrome手機模式下打開）

點擊這裏預覽項目

移動端掃描下方二維碼可直接打開

3、技術棧

• MVVM框架：Vue.js 2.0
• 狀態管理：Vuex
• 移動端組件庫：Mint-ui
• 前端路由：Vue-router
• 數據交互：Vue-resource
• 打包工具：webpack 2.0
• 環境配置：node + npm
• 語言：es6

4、項目運行

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 //項目打包

5、頁面部分截圖

1. 微信聊天（每一個聯繫人聊天后可自動添加到首頁）

2.朋友圈、點贊

3.我的中心、相冊、錢包、卡包、設置

6、項目樹

.
├── 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                                  //  管理全部狀態