阅读 2494

Vue模仿Mac版本QQ开源啦 | 掘金优秀开源推荐

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

前言

曾几何时,大多数使用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

写在最后

  • 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
  • 本文首发于掘金,如需转载请评论区留言💌
文章分类
前端
文章标签