日子总是在走，留下的，才是人生。

前言

曾几何时，大多数使用QQ的人，脑子里都想过这样一件事：这东西好厉害，啥时候我也能实现一个就好了。昔日，腾讯彻底关闭了web版本的QQ。今日，我决定用Vue来实现它，当然这是一个很庞大的项目，目前我只完成了一个雏形，实现了群聊功能和移动端的适配(简陋适配)。

我决定写这个项目的主要原因是想巩固下Vue的语法，挑战下将客户端才能实现的功能，搬到浏览器端来实现。

项目目录

  • dist 编译后的项目文件，可直接部署在服务器

  • node_modules node环境相关的依赖包

  • public 公用文件夹，用于存放当前项目需要引用的公用文件

    • index.html 模版文件，用于引入一些cdn文件，以及网站的一些基础配置。
    • static 静态资源文件夹，配置css分离和js分离后，vue项目引用的图片以及混淆后的css和js将自动打包近这个文件夹中
    • favicon.ico 网站ico图标

  • src 源代码文件夹，Vue所有代码都在此文件夹中

    • api 当前项目用到的所有接口，都在此处定义。

    • base.js 接口域名管理，应对后端多个开发者的场景。

    • index.js api统一出口，将api接口根据功能划分为多个模块，在此处进行导出

    • websiteManageAPI.js 每一个功能模块需要用的接口，文件命名格式为：${module}API

  • assets 静态资源文件夹

    • img 存放图片
    • json 存放项目中需要用到的json配置文件
    • scss 存放css预处理文件
    • logo.png 当前项目logo

  • components 公用组件文件夹

    • main-body.vue 根据当前状态码来决定加载：消息列表组件 | 联系人组件 | 更多内容组件
    • main-content.vue 主内容组件：包含顶部工具栏以及整个聊天窗口的主体代码
    • message-display.vue 消息列表组件：包含消息列表显示、消息发送、表情面板和其它快捷工具栏

  • plugins 插件配置文件夹，用于存储当前项目所使用插件的自定义配置

    • axios.js axios库的相关封装

  • router 路由的配置文件夹

    • index.js 配置当前项目用到的所有路由

  • store vuex的配置文件夹

    • index.js vuex的相关配置

  • views 普通组件文件夹

    • contact-list.vue 联系人列表页面
    • more-list.vue 更多列表页面
    • msg-list.vue 消息列表页面

  • App.vue Vue主文件，该文件的代码最终会被编译到public/index.html下

  • main.js Vue入口文件，渲染的时候会被webpack引入变成app.js文件 app.js文件在index.html中会被引入

运行效果截图

目前实现的效果较为简单，不足的地方，希望大家多多包含?。在线体验地址：chat-system

项目地址：chat-system

写在最后

  • 文中如有错误，欢迎在评论区指正，如果这篇文章帮到了你，欢迎点赞和关注?
  • 本文首发于掘金，如需转载请评论区留言?