基于Vue2實現的仿手機QQ單頁面應用功能(接入聊天機器人 )

概述

使用Vue2進行的仿手機QQ的webapp的制作，在ui上，參考了設計師kaokao的作品，作品由個人獨立開發，源碼中進行了詳細的注釋。 由于自己也是初學Vue2，所以注釋寫的不夠精簡，請見諒。

項目地址 https://github.com/jiangqizheng/vue-MiniQQ

項目已實現功能

• 對話功能——想著既然是QQ總要能進行對話交流，所以在項目中接入了圖靈聊天機器人，可以與列表中的每個人物進行對話。
• 左滑刪除——左滑刪除相關消息。
• 搜索頁面——點擊右上角搜索按鈕，能夠進入搜索頁面，輸入對應的單詞或者數字，動態查找好友。
• 項目中數據流動由vuex進行控制

注：對于那句Flux 架構就像眼鏡：您自會知道什么時候需要它。感覺好像懂了點什么。

計劃中或者即將實現的功能

• 注冊，登陸功能
• 添加，刪除好友，好友列表分組展示
• 撥號界面，多人聊天、qq群
• 空間，好友說說，點贊、圖片分享
• 個人設置，切換主題

注：以上內容都是經過考慮，能夠較完美的實現的內容，部分功能已經在制作中，由于本項目是個長期的項目，所以對于后續進度感興趣的朋友也可以關注下，并且如果有想到什么好主意，歡迎告訴我。

桌面及移動端測試

• 桌面測試： npm run dev 后，打開***開發者工具*** F12，模擬手機預覽 Ctrl+Shift+M (Chrome)
• 移動端測試： npm run dev 后，在cmd命令行中輸入ipconfig（win）獲取到局域網內ip地址后，生成二維碼，然后進行測試（建議微信掃二維碼）

動圖預覽

gif圖好像被壓縮的太多了，感興趣的可以clone后查看。

側邊欄與個人主頁

搜素組件的動畫效果

進入對話框

對話框信息

首頁Tab切換

更新說明

• 對更多內容進行詳細的注釋，修正了左滑刪除的一些錯誤，現在能夠對消息進行正常的左滑刪除，然后在朋友列表進行對話就能重新生成聊天隊列了（可以刪除信息后再繼續與機器人進行對話了），另外擴大了刪除按鈕的寬度————3.28

問題反饋

建議移步Issues，歡迎反饋項目中的不良/錯誤表現，以及你在開發過程遇到的問題，作者會積極回復。

感謝

感謝您的來訪 ，如果對于您有幫助 ，麻煩您使勁的給個Star吧 ！ ^_^

其他說明

• 由于是抱著邊寫邊學的心態，所以可能會出現些不嚴謹的地方，或者明顯的錯誤，關于這點，看到請反饋給我，十分感謝。
• 從零到目前的進度，雖然功能簡單，但還是花費了不少時間，把項目上傳是希望能夠對一些同樣正在學習Vue的小伙伴有一些幫助。
• 由于是第一次獨立的寫較為完整的Vue項目，所以希望大家給個Star! Q.o，并且歡迎討論。
• 此項目會在我Vue的使用過程中不斷被完善優化，并且用于測試添加一些新的有趣的功能。

技術棧

• vue-cli
• vue2
• vue-router
• vuex
• axios
• stylus
• webpack2
• muse-ui

目錄結構

.
├── README.md          
├── build              // 構建服務和webpack配置,轉發聊天機器人以及ajax獲取用戶數據相關內容
├── config             // 項目不同環境的配置
├── dist               // 項目build目錄
├── index.html         // 項目入口文件
├── package.json       // 項目配置文件
├── mockdata.json      // 項目模擬數據
├── src
│   ├── common         // 公用的css樣式
│   ├── components     // 各種組件
│   ├── router         // 存放路由的文件夾
│   ├── vuex          // 存放Vuex的相關
│   ├── App.Vue        // 模板文件入口
│   └── main.js        // Webpack 預編譯入口
├── static             // css js 和圖片資源
│  

Build Setup

一個正在制作中的基于vue2全家桶(vue2+vue-router+vuex)的仿QQ項目，移動端webapp，持續更新中·

# 安裝
npm install
# 運行（端口8888）
npm run dev
# 發布
npm run build

以上所述是小編給大家介紹的基于Vue2實現的仿手機QQ單頁面應用功能(接入聊天機器人 )，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！