vue+websocket+express+mongodb实战项目（实时聊天）（一）

##vue+websocket+express+mongodb实战项目（实时聊天）（一）

在原来基础上增加了多个聊天室以及发送图片【vue+websocket+express+mongodb实战项目（实时聊天）（二）】
http://blog.csdn.net/blueblueskyhua/article/details/73250992
旧版聊天室地址:
https://github.com/hua1995116/webchat/tree/08ff845a2ca46c27a9024138d5b4173c89dd8056
新版地址：
https://github.com/hua1995116/webchat
—————————————————————————————
继上一个项目用vuejs仿网易云音乐（实现听歌以及搜索功能）后，发现上一个项目单纯用vue的model管理十分混乱，然后我去看了看vuex，打算做一个项目练练手，又不想做一个重复的项目，这次我就放弃颜值，打算走心派。结合了后台nodejs，以及数据库mongodb来开发了一个实时聊天系统。这个系统可以说是一统江山，也算是实现前端程序员的一个梦了，前后通吃。自认为是一个比全的项目。项目地址：https://github.com/hua1995116/webchat 觉得好的请顺手来个star。

技术栈

• 前端 vue，vue-router ,vuex
• 后端 nodejs，express
• 数据库 mongodb
• 通讯 websocket
• 脚手架工具 vue-cli

结构
├─build
├─config
├─models(存放mongoose对象)
├─schemas（存放mongoose的schemas模型）
├─src
│ │ App.vue
│ │ main.js（主入口）
│ ├─assets
│ ├─components （组件）
│ ├─router（vue-router路由）
│ └─store（vuex）
└─static（静态资源）

首先用脚手架工具构建一个项目。像这样：

vue init webpack my-project-name

结构大致是这样的

好！既然我们是实战项目，我就不多说这些配置问题。不然又跑题了。不然又要被小哥哥小姐姐们打了。

前端

首先看src目录下的页面布局。
main.js// 主入口

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// 使用museui组件
import MuseUI from 'muse-ui'
import 'muse-ui