日子总是在走,留下的,才是人生。
前言
曾几何时,大多数使用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 当前项目用到的所有接口,都在此处定义。
-
当前项目针对axios进行了封装,对此处不了解的开发者可参考我的另一篇文章:Vue合理配置axios并在项目中进行实际应用
-
- base.js 接口域名管理,应对后端多个开发者的场景。
- index.js api统一出口,将api接口根据功能划分为多个模块,在此处进行导出
- websiteManageAPI.js 每一个功能模块需要用的接口,文件命名格式为:${module}API
- 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
写在最后
- 文中如有错误,欢迎在评论区指正,如果这篇文章帮到了你,欢迎点赞和关注😊
- 本文首发于掘金,如需转载请评论区留言💌
评论区