vue-chat airchat
介紹
這是我的畢設專案，產品功能和頁面參照qq，微信，TIM，不完全一樣，有些是自己的想法。前後端都自己寫。 感覺是一個挺不錯的全棧入門專案，各種互動各種業務邏輯，不花哨，但實用。
對node（koa）和vue學習會挺有幫助，現在開源出來，接下去將繼續不斷完善?歡迎star
更新： electron-vue-chat：vue-chat的Electron桌面版本專案地址
正在寫react版本的?
技術棧：
前端vue，vue-router,vuex ，vue-cli和axios，scss,用rem做了移動端適配，沒有用第三方元件。 後端用koa2，用gulp構建工具實現自動重新整理後端程式碼執行。 資料庫用mysql，基於Token的jwt鑑權機制，用socket.io做雙向通訊；
github地址
線上地址
歡迎大家註冊登入，加這個群聊天? 搜群名稱： 專案交流群
也可以加我為好友，使用者名稱： hxvin
也可以註冊兩個賬號在兩個不同瀏覽器自己尬聊啦 ?
專案展示
- 系統組成
todo
2018.01.13 開始
- 登入
- 註冊
- 登出
- 彈窗，提示等元件
- 機器人智慧聊天回覆
- 私聊
- 群聊
2018.02.01
- 使用者資料卡
- 加好友及驗證好友請求
- 好友請求通知
- 刪除好友
- 未讀訊息提示
2018.02.10 吐槽一下，不得不佩服qq，微信的使用者體驗，功能細節挺多。。。。。
- 搜尋使用者，群組
- 建立群
- 群資料卡
- 加群
- 退群
- 修改備註
2018.02.11
- 釋出到線上
- 修改個人資訊
2018.03.02
- 收到新增好友請求底部tab紅點提醒
2018.03.20 收拾掉不少bug :-)
- 遷移成Electron桌面版本的，支援mac和win環境。
（Electron版本將於答辯完開源）
已開源：Electron桌面版本專案地址
2018.03.25
- 通訊錄展示
- 聊天發表情
- 聊天發圖片
- 支援聊天程式碼美化，md語法
- 使用者上傳頭像
- 效能優化，redis做快取
- 實現react版本的
下載到本地開發環境跑
本次開發我用了三個git分支，分別是主分支master ，開發分支dev ， 線上分支online，如果你要fork到你的本地跑，請fork master分支 。
（注意下到本地後如果要體驗soket.io通訊互聊，用兩個瀏覽器各開啟一個賬號，不能用同一個瀏覽器，因為我用localstorage快取賬戶資訊）
Fork 或者 下載本專案
然後進入本專案的資料夾，把vue-chat/server/init/sql 的 airchat.sql檔案 拉到你的msyql客戶端 run一下生成資料庫(我使用的是mac下的 Sequel Pro 挺好用的，當然你用其他方式也可生成資料庫也可)
npm i
複製程式碼npm run dev
複製程式碼cd server
複製程式碼npm i
複製程式碼接著下面兩條命令執行一條就行，看著選；（如果想要修改後端程式碼即時儲存重新整理，用第一條；如果像想用chrome進行debug除錯，用第二條)
npm run start
複製程式碼npm run dev
複製程式碼打包上線，讓所有人都能用到你的產品(非必須)
打包上線前需要對master分支的程式碼做一些修改。具體怎麼修改以及後續如何打包上線，請看我單獨寫的一篇文章vue-chat 打包上線小記，希望對你有幫助。
老習慣，程式碼註釋比較詳細，需要註釋而沒有註釋的我也儘快補上; 後面也會寫幾篇部落格來詳細介紹本專案，希望更好的幫助到入門的小夥伴(大神請略過，或者給些指導建議?)
如果對您有幫助，希望給個start，鼓勵我繼續更新^ ^
開發目錄
├── LICENSE
├── README.md
├── build
│ ├── build.js
│ ├── check-versions.js
│ ├── logo.png
│ ├── 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
├── dist //打包後的靜態資源
│ ├── index.html
│ └── static
├── index.html
├── package-lock.json
├── package.json
├── server // 後端程式碼
│ ├── config.js
│ ├── controllers
│ ├── gulpfile.js
│ ├── index.js
│ ├── init //資料庫初始化(sql檔案也在這)
│ ├── middlewares
│ ├── models
│ ├── package-lock.json
│ ├── package.json
│ ├── routes
│ └── utils
├── src //前端程式碼
│ ├── App.vue
│ ├── assets
│ ├── components
│ ├── main.js
│ ├── pages
│ ├── router
│ ├── store //vuex在這
│ └── utils
└── static
複製程式碼材料
自己總結的
文章都在我的部落格上，歡迎star我的部落格?